Base Login

components/datatable/ScrollBox.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+  <div class="px-2" :style="`max-height: ${maxheight}; overflow-y: auto;`" @scroll="handleScroll">
+    <div class="field is-grouped py-1 border-bottom my-0" v-for="(v, i) in rows" :key="i">
+      <p class="control is-expanded py-0 fs-14 hyperlink" @click="doClick(v,i)">
+        {{v[name]? $stripHtml(v[name], 75) : 'n/a'}}
+        <span class="icon has-text-primary" v-if="checked[i]"><i class="mdi mdi-check"></i></span>
+      </p>
+      <p class="control py-0" v-if="show">
+        <span class="icon-text has-text-grey mr-2 fs-13" v-if="show.author">
+          <span class="icon"><i class="mdi mdi-account-outline"></i></span>
+          <span>{{ v[show.author] }}</span>
+        </span>
+        <span class="icon-text has-text-grey mr-2 fs-13" v-if="show.view">
+          <span class="icon"><i class="mdi mdi-eye-outline"></i></span>
+          <span>{{ v[show.view] }}</span>
+        </span>
+          <span class="fs-13 has-text-grey" v-if="show.time">{{$dayjs(v['create_time']).fromNow(true)}}</span>
+        <b-tooltip label="Mở trong tab mới" type="is-dark" position="is-left">
+          <span class="icon hyperlink ml-1" v-if="show.link" @click="doClick(v,i, 'newtab')"><i class="mdi mdi-open-in-new"></i></span>
+        </b-tooltip>
+          <b-tooltip label="Đổi tên" type="is-dark" position="is-left" v-if="show.rename">
+          <span class="icon hyperlink ml-1" @click="$emit('rename', v, i)"><i class="mdi mdi-pencil-outline"></i></span>
+        </b-tooltip>
+        <b-tooltip label="Xóa" type="is-dark" position="is-left" v-if="show.delete">
+          <span class="icon hyperlink has-text-danger ml-1" @click="$emit('remove', v, i)"><i class="mdi mdi-delete-outline"></i></span>
+        </b-tooltip>
+      </p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['data', 'name', 'maxheight', 'perpage', 'sort', 'selects', 'keyval', 'show'],
+  data() {
+    return {
+      currentPage: 1,
+      total: this.data.length,
+      rows: this.data.slice(0, this.perpage),
+      selected: [],
+      checked: {},
+      time: undefined,
+      array: []
+    }
+  },
+  created() {
+    this.getdata()
+  },
+  watch: {
+    data: function(newVal) {
+      this.getdata()
+    },
+    selects: function(newVal) {
+      this.getSelect()
+    }
+  },
+  methods: {
+    getdata() {
+      this.currentPage = 1
+      this.array = this.$copy(this.data)
+      if(this.sort!==false) {
+        let f = {}
+        let showtime = this.show? this.show.time : false
+        showtime? f['create_time'] = 'desc' : f[this.name] = 'asc'
+        this.$multiSort(this.array, f)
+      }
+      this.rows = this.array.slice(0, this.perpage)
+      this.getSelect()
+    },
+    getSelect() {
+      if(!this.selects) return
+      this.selected = []
+      this.checked = {}
+      this.selects.map(v=>{
+        let idx = this.rows.findIndex(x=>x[this.keyval? this.keyval : this.name]===v)
+        if(idx>=0) {
+          this.selected.push(this.rows[idx])
+          this.checked[idx] = true
+        }
+      })
+    },
+    doClick(v, i, type) {
+      this.checked[i] = this.checked[i]? false : true
+      this.checked = this.$copy(this.checked)
+      let idx = this.selected.findIndex(x=>x.id===v.id) 
+      idx>=0? this.$delete(this.selected) : this.selected.push(v)
+      this.$emit('selected', v, type)
+    },
+    handleScroll(e) {
+      const bottom = e.target.scrollHeight - e.target.scrollTop -5 < e.target.clientHeight
+      if (bottom) { 
+        if(this.total? this.total>this.rows.length : true) {
+          this.currentPage +=1
+          let arr = this.array.filter((ele,index) => (index>=(this.currentPage-1)*this.perpage && index<this.currentPage*this.perpage))
+          this.rows = this.rows.concat(arr)
+        }
+      }
+    }
+  }
+}
+</script>