111 lines
3.9 KiB
Vue
111 lines
3.9 KiB
Vue
<template>
|
|
<div class="px-2" :style="`max-height: ${maxheight}; overflow-y: auto;`">
|
|
<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)">
|
|
{{ $stripHtml(v[name] || v.fullname || v.code || 'n/a', 75) }}
|
|
<span class="icon has-text-primary" v-if="checked[i] && notick!==true">
|
|
<SvgIcon v-bind="{name: 'tick.svg', type: 'primary', size: 15}"></SvgIcon>
|
|
</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">
|
|
<SvgIcon v-bind="{name: 'user.svg', type: 'gray', size: 15}"></SvgIcon>
|
|
<span>{{ v[show.author] }}</span>
|
|
</span>
|
|
<span class="icon-text has-text-grey mr-2 fs-13" v-if="show.view">
|
|
<SvgIcon v-bind="{name: 'view.svg', type: 'gray', size: 15}"></SvgIcon>
|
|
<span>{{ v[show.view] }}</span>
|
|
</span>
|
|
<span class="fs-13 has-text-grey" v-if="show.time">{{$dayjs(v['create_time']).fromNow(true)}}</span>
|
|
<span class="tooltip">
|
|
<a class="icon ml-1" v-if="show.link" @click="doClick(v,i, 'newtab')">
|
|
<SvgIcon v-bind="{name: 'opennew.svg', type: 'gray', size: 15}"></SvgIcon>
|
|
</a>
|
|
<span class="tooltiptext">Mở trong tab mớ</span>
|
|
</span>
|
|
<span class="tooltip" v-if="show.rename">
|
|
<a class="icon ml-1" @click="$emit('rename', v, i)">
|
|
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 15}"></SvgIcon>
|
|
</a>
|
|
<span class="tooltiptext">Đổi tên</span>
|
|
</span>
|
|
<span class="tooltip" v-if="show.rename">
|
|
<a class="icon has-text-danger ml-1" @click="$emit('remove', v, i)">
|
|
<SvgIcon v-bind="{name: 'bin1.svg', type: 'gray', size: 15}"></SvgIcon>
|
|
</a>
|
|
<span class="tooltiptext">Xóa</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['data', 'name', 'maxheight', 'perpage', 'sort', 'selects', 'keyval', 'show', 'notick'],
|
|
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.$remove(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> |