103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
<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> |