125 lines
4.3 KiB
Vue
125 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<template v-if="data">
|
|
<article class="message is-findata" v-if="data.length===0">
|
|
<div class="message-body py-2 fs-16">
|
|
Chưa có <b>ghi chú</b> nào được lưu
|
|
</div>
|
|
</article>
|
|
<template v-else>
|
|
<article class="media mt-0 mb-0" v-for="(v,i) in data">
|
|
<figure class="media-left">
|
|
<Avatarbox v-bind="{
|
|
text: v.user__fullname[0].toUpperCase(),
|
|
size: 'two',
|
|
type: 'primary'
|
|
}" />
|
|
</figure>
|
|
<div class="media-content">
|
|
<div>
|
|
<p class="fs-15">
|
|
{{ v.detail }}
|
|
</p>
|
|
<p class="mt-1 fs-14 has-text-grey">
|
|
<span class="icon-text">
|
|
<span>{{v.user__fullname}}</span>
|
|
<span class="ml-3">{{ $dayjs(v['create_time']).fromNow(true) }}</span>
|
|
<template v-if="login.id===v.user">
|
|
<a class="ml-3" @click="edit(v)">
|
|
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 20}"></SvgIcon>
|
|
</a>
|
|
<a class="ml-3" @click="askConfirm(v, i)">
|
|
<SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 20}"></SvgIcon>
|
|
</a>
|
|
</template>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</template>
|
|
<div v-if="$getEditRights()" class="field is-grouped mt-3">
|
|
<div class="control is-expanded">
|
|
<textarea class="textarea" rows="2" placeholder="Viết ghi chú tại đây" v-model="detail"></textarea>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-primary has-text-white" @click="save()">Lưu</button>
|
|
</div>
|
|
</div>
|
|
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @confirm="confirm()"></Modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['row', 'api', 'pagename'],
|
|
data() {
|
|
return {
|
|
data: undefined,
|
|
detail: undefined,
|
|
vbind2: {image: undefined, text: 'ABC', size: 'two', type: 'findata'},
|
|
current: undefined,
|
|
showmodal: undefined,
|
|
obj: undefined
|
|
}
|
|
},
|
|
async created() {
|
|
if(!this.row) return
|
|
this.data = await this.$getdata(this.api, {ref: this.row.id})
|
|
},
|
|
computed: {
|
|
login: {
|
|
get: function() {return this.$store.login},
|
|
set: function(val) {this.$store.commit("updateLogin", {login: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
async save() {
|
|
if(this.$empty(this.detail)) return this.$snackbar('Chưa nhập nội dung ghi chú')
|
|
let data = {user: this.$store.login.id, detail: this.detail, ref: this.row.id}
|
|
if(this.current) {
|
|
data = this.$copy(this.current)
|
|
data.detail = this.detail
|
|
}
|
|
let rs = data.id? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data)
|
|
if(!rs) return
|
|
this.detail = undefined
|
|
if(this.current) {
|
|
this.current = undefined
|
|
let idx = this.$findIndex(this.data, {id: rs.id})
|
|
this.$set(this.data, idx, rs)
|
|
} else {
|
|
this.data.push(rs)
|
|
let rows = this.$copy(this.$store[this.pagename].data)
|
|
let idx = this.$findIndex(rows, {id: this.row.id})
|
|
let copy = this.$copy(this.row)
|
|
copy.count_note += 1
|
|
rows[idx] = copy
|
|
this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
|
|
}
|
|
},
|
|
edit(v) {
|
|
this.current = this.$copy(v)
|
|
this.detail = v.detail
|
|
},
|
|
askConfirm(v, i) {
|
|
this.obj = {v: v, i: i}
|
|
this.showmodal = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa ghi chú này không?', duration: 10},
|
|
title: 'Xóa ghi chú', width: '500px', height: '100px'}
|
|
},
|
|
async confirm() {
|
|
let v = this.obj.v
|
|
let i = this.obj.i
|
|
let rs = await this.$deleteapi(this.api, v.id)
|
|
if(rs==='error') return
|
|
this.$delete(this.data, i)
|
|
let rows = this.$copy(this.$store[this.pagename].data)
|
|
let idx = this.$findIndex(rows, {id: this.row.id})
|
|
let copy = this.$copy(this.row)
|
|
copy.count_note -= 1
|
|
rows[idx] = copy
|
|
this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
|
|
}
|
|
}
|
|
}
|
|
</script> |