changes
This commit is contained in:
Xuan Loi
14
components/Caption.vue
Normal file
14
components/Caption.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span :class="`icon-text fsb-${props.size||17} ${props.type || 'has-text-findata'}`">
|
||||
<span>{{ title }}</span>
|
||||
<SvgIcon id="ignore" v-bind="{name: 'right.svg', type: props.type? props.type.replace('has-text-', '') : null,
|
||||
size: (props.size>=30? props.size*0.7 : props.size) || 20, alt: 'Mũi tên chỉ hướng'}"></SvgIcon>
|
||||
</span>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
type: String,
|
||||
size: Number,
|
||||
title: String
|
||||
})
|
||||
</script>
|
||||
70
components/Modal.vue
Normal file
70
components/Modal.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="modal is-active" @click="doClick">
|
||||
<div class="modal-background" :style="`opacity:${count===0? 0.7 : 0.3} !important;'`"></div>
|
||||
<div class="modal-card" :id="docid" :style="`width:${vWidth};`">
|
||||
<header class="modal-card-head my-0 py-2" v-if="title">
|
||||
<div style="width: 100%;">
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded has-text-left">
|
||||
<p class="fsb-18 has-text-dark" v-html="title"></p>
|
||||
</div>
|
||||
<div class="control has-text-right">
|
||||
<button class="delete is-medium" @click="closeModal()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="modal-card-body px-4 py-4" :style="`min-height:${height? height : '700px'}`">
|
||||
<component :is="getComponent()" v-bind="props.vbind" @modalevent="modalEvent" @close="closeModal" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineAsyncComponent } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
const emit = defineEmits(['close', 'remove'])
|
||||
const store = useStore()
|
||||
const { $id } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
component: String,
|
||||
width: String,
|
||||
height: String,
|
||||
vbind: Object,
|
||||
title: String
|
||||
})
|
||||
function getComponent() {
|
||||
let arr = props.component.split('/')
|
||||
if(arr.length===2) {
|
||||
return defineAsyncComponent(() => import(`@/components/${arr[0]}/${arr[1]}.vue`))
|
||||
} else {
|
||||
return defineAsyncComponent(() => import(`@/components/${arr[0]}.vue`))
|
||||
}
|
||||
}
|
||||
const docid = $id()
|
||||
const viewport = store.viewport
|
||||
var title = props.title
|
||||
var count = 0
|
||||
var lock = false
|
||||
var vWidth = viewport<=2? '100%' : props.width || '60%'
|
||||
const closeModal = function() {
|
||||
if(!lock) emit('close')
|
||||
}
|
||||
const modalEvent = function(ev) {
|
||||
emit(ev.name, ev.data)
|
||||
}
|
||||
const doClick = function(e) {
|
||||
//e.stopPropagation()
|
||||
if(!e.srcElement.offsetParent) return
|
||||
if(document.getElementById(docid)) {
|
||||
if(!document.getElementById(docid).contains(e.target)) {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(()=> {
|
||||
window.addEventListener('keydown', (e) => {if(e.key==='Escape') closeModal()})
|
||||
const collection = document.getElementsByClassName("modal-background")
|
||||
count = collection.length
|
||||
})
|
||||
</script>
|
||||
202
components/SearchBox.vue
Normal file
202
components/SearchBox.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field has-addons">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
|
||||
<div class="dropdown-trigger" style="width: 100%;">
|
||||
<input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text"
|
||||
@focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="beginSearch" v-model="value" />
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content px-3" style="min-width: 250px;">
|
||||
<p class="has-text-findata" v-if="data.length===0">Không có giá trị thỏa mãn</p>
|
||||
<ScrollBox v-bind="{data: data, name: field, fontsize: 14, maxheight: '200px'}" @selected="choose" v-else></ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'magnify.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-if="viewaddon">
|
||||
<button class="button is-dark px-2" @click="viewInfo()">
|
||||
<SvgIcon v-bind="{name: 'view.svg', type: 'white', size: 22}"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control" v-if="addon">
|
||||
<button class="button is-primary px-2" @click="addNew()">
|
||||
<SvgIcon v-bind="{name: 'add1.png', type: 'white', size: 22}"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @dataevent="dataevent" @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(['option', 'modalevent'])
|
||||
import ScrollBox from '~/components/datatable/ScrollBox'
|
||||
const { $nonAccent, $find, $getdata, $copy, $empty, $findapi, $findIndex} = useNuxtApp()
|
||||
var props = defineProps({
|
||||
api: String,
|
||||
field: String,
|
||||
column: Array,
|
||||
first: Boolean,
|
||||
optionid: Number,
|
||||
filter: Object,
|
||||
addon: Object,
|
||||
viewaddon: Object,
|
||||
position: String,
|
||||
disabled: Boolean,
|
||||
vdata: Object
|
||||
})
|
||||
var search = undefined
|
||||
var data = ref([])
|
||||
var timer = undefined
|
||||
var value = ref()
|
||||
var selected = undefined
|
||||
var showmodal = ref()
|
||||
var params = props.api? $findapi(props.api)['params'] : {}
|
||||
var orgdata = undefined
|
||||
var error = false
|
||||
var focused = ref(false)
|
||||
var count1 = 0
|
||||
var count2 = 0
|
||||
var pos = undefined
|
||||
async function initData() {
|
||||
getPos()
|
||||
if(props.vdata) {
|
||||
orgdata = $copy(props.vdata)
|
||||
orgdata.map(v=>v.search = $nonAccent(v[props.field]))
|
||||
}
|
||||
if(props.first) {
|
||||
data.value = orgdata? $copy(orgdata) : await getData()
|
||||
if(props.optionid) {
|
||||
let f = {}
|
||||
f[props.field] = props.optionid
|
||||
if(props.optionid>0) f = {id: props.optionid}
|
||||
selected = $find(data.value, f)
|
||||
if(selected && props.vdata) {
|
||||
return value.value = selected[props.field]
|
||||
}
|
||||
}
|
||||
} else if(props.optionid) {
|
||||
selected = await $getdata(props.api, {id: props.optionid}, undefined, true)
|
||||
}
|
||||
if(selected) doSelect(selected)
|
||||
}
|
||||
/*watch(()=> {
|
||||
optionid: function(newVal) {
|
||||
if(optionid) selected = $find(data, {id: optionid})
|
||||
if(selected) doSelect(selected)
|
||||
else value = undefined
|
||||
}
|
||||
filter: async function(newVal) {
|
||||
data = await getData()
|
||||
},
|
||||
vdata: function(newval) {
|
||||
if(newval) {
|
||||
orgdata = $copy(props.vdata)
|
||||
orgdata.map(v=>v.search = $nonAccent(v[field]))
|
||||
data = $copy(orgdata)
|
||||
selected = undefined
|
||||
value = undefined
|
||||
if(optionid) selected = $find(data, {id: optionid})
|
||||
if(selected) doSelect(selected)
|
||||
}
|
||||
}
|
||||
}}*/
|
||||
function choose(v) {
|
||||
focused.value = false
|
||||
count1 = 0
|
||||
count2 = 0
|
||||
doSelect(v)
|
||||
}
|
||||
function setFocus() {
|
||||
focused.value = true
|
||||
count1 = 0
|
||||
count2 = 0
|
||||
}
|
||||
function lostFocus() {
|
||||
setTimeout(()=>{
|
||||
focused.value = false
|
||||
if($empty(value.value)) emit('option', null)
|
||||
}, 200)
|
||||
}
|
||||
function pressEnter() {
|
||||
if(data.length===0) return
|
||||
choose(data[0])
|
||||
}
|
||||
function doClick() {
|
||||
count1 += 1
|
||||
}
|
||||
function doSelect(option) {
|
||||
if($empty(option)) return
|
||||
selected = option
|
||||
value.value = selected[props.field]
|
||||
emit('option', option)
|
||||
emit('modalevent', {name: 'option', data: option})
|
||||
}
|
||||
function findObject(val) {
|
||||
let rows = $copy(orgdata)
|
||||
if($empty(val)) data.value = rows
|
||||
else {
|
||||
let text = $nonAccent(val)
|
||||
data.value = rows.filter(v=>v.search.toLowerCase().indexOf(text.toLowerCase())>=0)
|
||||
}
|
||||
}
|
||||
async function getData() {
|
||||
params.filter = props.filter
|
||||
params.sort = '-id'
|
||||
let data = await $getdata(props.api, undefined, params)
|
||||
return data
|
||||
}
|
||||
async function getApi(val) {
|
||||
if(props.vdata) return findObject(val)
|
||||
let text = val? val.toLowerCase() : ''
|
||||
let f = {}
|
||||
props.column.map(v=>{
|
||||
f[`${v}__icontains`] = text
|
||||
})
|
||||
params.filter_or = f
|
||||
if(props.filter) params.filter = $copy(props.filter)
|
||||
data.value = await $getdata(props.api, undefined, params)
|
||||
}
|
||||
function beginSearch(e) {
|
||||
let val = e.target.value
|
||||
search = val
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => getApi(val), 150)
|
||||
if($empty(val)) emit('option', null)
|
||||
}
|
||||
function addNew() {
|
||||
showmodal.value = $copy(props.addon)
|
||||
}
|
||||
function dataevent(v) {
|
||||
let idx = $findIndex(data.value, {id: v.id})
|
||||
idx<0? data.value.push(v) : data.value[idx] = v
|
||||
doSelect(v)
|
||||
}
|
||||
function viewInfo() {
|
||||
if(!selected) return $dialog('Vui lòng lựa chọn trước khi xem thông tin.', 'Thông báo')
|
||||
let copy = $copy(props.viewaddon)
|
||||
copy.vbind = {row: selected}
|
||||
showmodal.value = copy
|
||||
}
|
||||
function getPos() {
|
||||
switch(props.position) {
|
||||
case 'is-top-left':
|
||||
pos = 'is-up is-left'
|
||||
break;
|
||||
case 'is-top-right':
|
||||
pos = 'is-up is-right'
|
||||
break;
|
||||
case 'is-bottom-left':
|
||||
pos = 'is-right'
|
||||
break;
|
||||
case 'is-bottom-right':
|
||||
pos = 'is-right'
|
||||
break;
|
||||
}
|
||||
}
|
||||
initData()
|
||||
</script>
|
||||
43
components/SvgIcon.vue
Normal file
43
components/SvgIcon.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<nuxt-img loading="lazy" :alt="alt" :class="`svg-${type || 'findata'}`" :style="`width: ${size || 26}px;`" :src="`/icon/${name || 'check.svg'}`"/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['name', 'size', 'type', 'alt']
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.svg-primary {
|
||||
filter: brightness(0) saturate(100%) invert(48%) sepia(97%) saturate(2023%) hue-rotate(188deg) brightness(98%) contrast(89%);
|
||||
}
|
||||
.svg-danger {
|
||||
filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(2983%) hue-rotate(351deg) brightness(101%) contrast(131%);
|
||||
}
|
||||
.svg-findata {
|
||||
filter: brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(1880%) hue-rotate(340deg) brightness(101%) contrast(101%);
|
||||
}
|
||||
.svg-warning {
|
||||
filter: invert(86%) sepia(24%) saturate(5381%) hue-rotate(347deg) brightness(100%) contrast(103%);
|
||||
}
|
||||
.svg-blue {
|
||||
filter: invert(9%) sepia(98%) saturate(7147%) hue-rotate(248deg) brightness(94%) contrast(145%);
|
||||
}
|
||||
.svg-green {
|
||||
filter: invert(43%) sepia(99%) saturate(1326%) hue-rotate(88deg) brightness(97%) contrast(95%);
|
||||
}
|
||||
.svg-grey {
|
||||
filter: invert(100%) sepia(0%) saturate(213%) hue-rotate(133deg) brightness(86%) contrast(93%);
|
||||
}
|
||||
.svg-gray {
|
||||
filter: invert(35%) sepia(10%) saturate(18%) hue-rotate(338deg) brightness(97%) contrast(82%);
|
||||
}
|
||||
.svg-gray1 {
|
||||
filter: invert(34%) sepia(6%) saturate(71%) hue-rotate(315deg) brightness(95%) contrast(88%);
|
||||
}
|
||||
.svg-white {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.svg-black {
|
||||
filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(107%);
|
||||
}
|
||||
</style>
|
||||
14
components/Tooltip.vue
Normal file
14
components/Tooltip.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="tooltip">
|
||||
<span v-html="props.html"></span>
|
||||
<span class="tooltiptext" v-html="props.tooltip"></span>
|
||||
</span>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
var props = defineProps({
|
||||
html: String,
|
||||
tooltip: String,
|
||||
width: Number
|
||||
})
|
||||
</script>
|
||||
122
components/TopMenu.vue
Executable file
122
components/TopMenu.vue
Executable file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
|
||||
<div class="navbar-brand mr-3">
|
||||
<span class="navbar-item mr-3">
|
||||
<SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'green' }"</SvgIcon>
|
||||
<span class="fsb-20" style="color:#008000">{{$dayjs().format('DD/MM')}}</span>
|
||||
</span>
|
||||
<span class="navbar-item header-logo" aria-label="về trang chủ"></span>
|
||||
<a role="button" class="navbar-burger" id="burger" aria-label="menu" aria-expanded="false" data-target="navMenu" @click="handleClick()">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
<div class="navbar-start">
|
||||
<template v-for="(v,i) in leftmenu" :key="i" :id="v.code">
|
||||
<a class="navbar-item" v-if="!v.submenu" @click="changeTab(v)">
|
||||
<span :class="`fsb-17 ${currentTab.code===v.code? 'activetab' : ''}`">{{ v[lang] }}</span>
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable" v-else>
|
||||
<a class="navbar-item" @click="changeTab(v)">
|
||||
<span :class="`icon-text ${currentTab.code===v.code? 'activetab' : ''}`">
|
||||
<span class="fsb-17">{{v[lang]}}</span>
|
||||
<SvgIcon style="padding-top:4px;" v-bind="{name: 'down2.svg',
|
||||
type: currentTab.code===v.code? 'white' : 'dark', size: 15}">
|
||||
</SvgIcon>
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-dropdown has-background-light">
|
||||
<a
|
||||
class="navbar-item has-background-light fs-15 has-text-black py-1 border-bottom"
|
||||
v-for="x in v.submenu"
|
||||
@click="changeTab(v, x)"
|
||||
>
|
||||
{{ x[lang] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<!-- <span class="navbar-item">
|
||||
<LanguageToggle @langChanged="changeLang"></LanguageToggle>
|
||||
</span> -->
|
||||
<a class="navbar-item" @click="changeTab(tabConfig)">
|
||||
<SvgIcon v-bind="{name: 'configuration.svg', type: 'findata', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
<a class="navbar-item" @click="openProfile()" v-if="avatar">
|
||||
<Avatarbox v-bind="avatar" ></Avatarbox>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
import { useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const emit = defineEmits(['changetab', 'langChanged'])
|
||||
const { $clone, $find, $filter } = useNuxtApp()
|
||||
var lang = ref(store.lang)
|
||||
var menu = $filter(store.common, {category: 'topmenu'})
|
||||
menu.map(v=>{
|
||||
let arr = $filter(store.common, {category: 'submenu', classify: v.code})
|
||||
v.submenu = arr.length>0? arr : null
|
||||
})
|
||||
var leftmenu = $filter(store.common, {category: 'topmenu', classify: 'left'})
|
||||
var currentTab = ref(leftmenu[0])
|
||||
var subTab = ref()
|
||||
var tabConfig = $find(menu, {code: 'configuration'})
|
||||
var avatar = ref()
|
||||
var isAdmin = ref()
|
||||
const handleClick = function() {
|
||||
const target = document.getElementById('burger');
|
||||
target.classList.toggle('is-active');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
target1.classList.toggle('is-active');
|
||||
}
|
||||
const closeMenu = function() {
|
||||
if(!document) return
|
||||
const target = document.getElementById('burger');
|
||||
const target1 = document.getElementById('navMenu');
|
||||
if(!target) return
|
||||
if(target.classList.contains('is-active')) {
|
||||
target.classList.remove('is-active')
|
||||
target1.classList.remove('is-active')
|
||||
}
|
||||
}
|
||||
function changeLang(val) {
|
||||
lang.value = val
|
||||
emit('langChanged')
|
||||
}
|
||||
function changeTab(tab, subtab) {
|
||||
currentTab.value = tab
|
||||
subTab.value = subtab
|
||||
emit('changetab', tab, subtab)
|
||||
closeMenu()
|
||||
let query = subtab? {tab: tab.code, subtab: subtab.code} : {tab: tab.code}
|
||||
router.push({query: query})
|
||||
}
|
||||
function openProfile() {
|
||||
let modal = {component: 'user/Profile', width: '1100px', height: '400px', title: 'User profile'}
|
||||
store.commit('showmodal', modal)
|
||||
}
|
||||
let found = route.query.tab? $find(menu, {code: route.query.tab}) : null
|
||||
changeTab(found || leftmenu[0])
|
||||
onMounted(()=> {
|
||||
if(!store.login) return
|
||||
avatar.value = {image: null, text: store.login.fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}
|
||||
isAdmin.value = store.login.type__code==='admin'
|
||||
})
|
||||
watch(() => store.login, (newVal, oldVal) => {
|
||||
if(!newVal) return
|
||||
avatar.value = {image: null, text: store.login.fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}
|
||||
isAdmin.value = store.login.type__code==='admin'
|
||||
})
|
||||
</script>
|
||||
15
components/common/Avatarbox.vue
Normal file
15
components/common/Avatarbox.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div :class="`cbox-${type}-${size} mx-0 px-0`" @click="$emit('justclick')" :style="image? 'border: none' : ''">
|
||||
<figure class="image" v-if="image">
|
||||
<img class="is-rounded" :src="`${$path()}download?name=${image}`">
|
||||
</figure>
|
||||
<div v-else>
|
||||
<span>{{text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['text', 'image', 'type', 'size']
|
||||
}
|
||||
</script>
|
||||
36
components/common/Editor.vue
Normal file
36
components/common/Editor.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<QuillEditor v-model:content="content" content-type="html" theme="snow" :toolbar="toolbarOptions" @text-change="textChange"
|
||||
style="font-size: 16px; height: 450px;" />
|
||||
</ClientOnly>
|
||||
</template>
|
||||
<script setup>
|
||||
import { QuillEditor } from '@vueup/vue-quill'
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
||||
const emit = defineEmits(['content', 'modalevent'])
|
||||
var props = defineProps({
|
||||
text: String,
|
||||
row: Object,
|
||||
pagename: String,
|
||||
api: String
|
||||
})
|
||||
// Custom toolbar options
|
||||
const toolbarOptions = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
['blockquote', 'code-block'],
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
[{ script: 'sub' }, { script: 'super' }],
|
||||
[{ indent: '-1' }, { indent: '+1' }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
['clean'],
|
||||
['link', 'image', 'video']
|
||||
]
|
||||
var content = props.text
|
||||
function textChange() {
|
||||
emit('content', content)
|
||||
emit('modalevent', {name: 'content', data: content})
|
||||
}
|
||||
</script>
|
||||
37
components/common/InputEmail.vue
Normal file
37
components/common/InputEmail.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text"
|
||||
:placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'email.svg', type: 'gray', size: 21}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
error: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.$empty(this.value)) {
|
||||
this.value = undefined
|
||||
this.error = false
|
||||
return this.$emit('email', null)
|
||||
}
|
||||
let check = this.$errEmail(this.value)
|
||||
this.error = check? true : false
|
||||
this.$emit('email', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
components/common/InputNumber.vue
Normal file
40
components/common/InputNumber.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${disabled? 'has-text-black' : ''}`" type="text" :placeholder="placeholder || ''" v-model="value" @keyup="doCheck"
|
||||
:disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'calculator.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
timer: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.value) this.value = this.$numtoString(this.value)
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.$numtoString(this.record[this.attr])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.timer) clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>this.checkChange(), 500)
|
||||
},
|
||||
checkChange() {
|
||||
if(!this.$empty(this.value)) {
|
||||
this.value = this.$numtoString(this.$formatNumber(this.value))
|
||||
this.$emit('number', this.$formatNumber(this.value))
|
||||
} else this.$formatNumber('number', null)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
components/common/InputPhone.vue
Normal file
37
components/common/InputPhone.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="control has-icons-left">
|
||||
<input :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-black' : ''}`" type="text"
|
||||
:placeholder="placeholder || ''" v-model="value" @keyup="doCheck" :disabled="disabled || false">
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'placeholder', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
|
||||
error: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
this.value = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doCheck() {
|
||||
if(this.$empty(this.value)) {
|
||||
this.value = undefined
|
||||
this.error = false
|
||||
return this.$emit('phone', null)
|
||||
}
|
||||
let check = this.$errPhone(this.value)
|
||||
this.error = check? true : false
|
||||
this.$emit('phone', this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
107
components/common/JobView.vue
Normal file
107
components/common/JobView.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline mx-0">
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('name')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.fullname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('job')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.job__title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('phone')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled v-model="record.phone">
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.phone">{{ errors.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="field">
|
||||
<label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" disabled placeholder="" v-model="record.email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('address')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" disabled placeholder="" v-model="record.address">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('apply-date')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input has-text-black" type="text" placeholder="" disabled :value="$dayjs(record.create_time).format('DD/MM/YYYY hh:mm')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="field">
|
||||
<label class="label">Link<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" disabled placeholder="" v-model="record.link">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label">{{findLang('status')}}<b class="ml-1 has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<SearchBox v-bind="{api:'applyresult', field: store.lang==='en'? 'en' : 'name', column:[store.lang==='en'? 'en' : 'name'],
|
||||
first: true, optionid: record.result, sort: 'name', position: 'is-top-left'}" @option="selected('_result', $event)"></SearchBox>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.url_web">{{ errors.url_web }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<div class="mt-3">
|
||||
<button class="button is-primary has-text-white" @click="save()">{{findLang('save')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['pagename', 'row'],
|
||||
data() {
|
||||
return {
|
||||
errors: {},
|
||||
record: this.$copy(this.row || {})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findLang(code) {
|
||||
let found = this.$find(this.store.common, {code: code})
|
||||
return found? found[this.store.lang] : null
|
||||
},
|
||||
selected(attr, obj) {
|
||||
this.record.result = obj.id
|
||||
},
|
||||
async save() {
|
||||
let found = this.$findapi('jobapply')
|
||||
await this.$updaterow('jobapply', this.record, found.params.values, this.pagename)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
121
components/common/NoteInfo.vue
Normal file
121
components/common/NoteInfo.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<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" v-for="(v,i) in data">
|
||||
<figure class="media-left">
|
||||
<Avatarbox v-bind="{text: v.user__fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}" />
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div>
|
||||
<p class="fs-15">
|
||||
{{ v.detail }}
|
||||
</p>
|
||||
<p class="mt-1 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: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-3" @click="askConfirm(v, i)">
|
||||
<SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</template>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</template>
|
||||
<div class="field is-grouped mt-3">
|
||||
<div class="control is-expanded">
|
||||
<textarea class="textarea" rows="1" 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.state.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.state.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.state[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.state[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>
|
||||
14
components/common/Notebox.vue
Normal file
14
components/common/Notebox.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="dot-primary" @click="doClick()">{{ row.count_note || '+' }}</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'api', 'pagename'],
|
||||
methods: {
|
||||
doClick() {
|
||||
let obj = {component: 'common/NoteInfo', title: 'Ghi chú', width: '50%', vbind: {row: this.row, api: this.api, pagename: this.pagename}}
|
||||
this.$emit('open', {name: 'dataevent', data: {modal: obj}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
components/common/Phone.vue
Normal file
54
components/common/Phone.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="fsb-30">{{ text }}
|
||||
<a class="ml-5" @click="copy()">
|
||||
<SvgIcon v-bind="{name: 'copy.svg', type: 'gray', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
<p class="buttons mt-5 pt-2">
|
||||
<button class="button is-primary has-text-white mr" @click="call()">Call</button>
|
||||
<button class="button is-primary has-text-white mr-2" @click="sms()">SMS</button>
|
||||
<button class="button is-dark mr-2" @click="openZalo()">Zalo</button>
|
||||
</p>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'pagename'],
|
||||
data() {
|
||||
return {
|
||||
text: undefined,
|
||||
phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var format = function(s) {
|
||||
return `${s.slice(0,3)} ${s.slice(3,6)} ${s.slice(6, 20)}`
|
||||
}
|
||||
this.text = format(this.phone)
|
||||
},
|
||||
methods: {
|
||||
call() {
|
||||
window.open(`tel:${this.phone}`)
|
||||
},
|
||||
sms() {
|
||||
window.open(`sms:${this.phone}`)
|
||||
},
|
||||
sendSms() {
|
||||
let api = this.row.code.indexOf('CN')>=0? 'customersms' : undefined
|
||||
if(this.row.code.indexOf('LN')>=0) api = 'loansms'
|
||||
else if(this.row.code.indexOf('TS')>=0) api = 'collateralsms'
|
||||
this.showmodal = {component: 'user/Sms', title: 'Nhắn tin SMS', width: '50%', height: '400px',
|
||||
vbind: {row: this.row, pagename: this.pagename, api: api}}
|
||||
},
|
||||
copy() {
|
||||
this.$copyToClipboard(this.phone)
|
||||
},
|
||||
openZalo() {
|
||||
window.open(`https://zalo.me/${this.phone}`, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
540
components/datatable/ContextMenu.vue
Normal file
540
components/datatable/ContextMenu.vue
Normal file
@@ -0,0 +1,540 @@
|
||||
<template>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
|
||||
>
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
||||
></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
v-html="'Sắp xếp tăng dần'"
|
||||
></span>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
|
||||
>
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'az.svg', type: checkFilter() ? 'grey' : 'primary', size: 22 }"
|
||||
></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Sắp xếp giảm dần</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="moveLeft()">
|
||||
<SvgIcon v-bind="{ name: 'left5.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Chuyển cột sang trái</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="moveRight()">
|
||||
<SvgIcon v-bind="{ name: 'right5.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Chuyển cột sang phải</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="resizeWidth()">
|
||||
<SvgIcon v-bind="{ name: 'thick.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tăng độ rộng cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="resizeWidth(true)">
|
||||
<SvgIcon v-bind="{ name: 'thin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Giảm độ rộng cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="hideField()">
|
||||
<SvgIcon v-bind="{ name: 'eye-off.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Ẩn cột</span
|
||||
>
|
||||
</span>
|
||||
<!-- <template v-if="store.login ? store.login.is_admin : false"> -->
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="currentField.mandatory ? false : doRemove()">
|
||||
<SvgIcon v-bind="{ name: 'bin.svg', type: 'primary', size: 23 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Xóa cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a
|
||||
class="mr-4"
|
||||
:class="currentField.format === 'number' ? null : 'has-text-grey-light'"
|
||||
@click="
|
||||
currentField.format === 'number'
|
||||
? $emit('modalevent', { name: 'copyfield', data: currentField })
|
||||
: false
|
||||
"
|
||||
>
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Sao chép cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="fieldList()">
|
||||
<SvgIcon v-bind="{ name: 'menu4.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Danh sách cột</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="createField()">
|
||||
<SvgIcon v-bind="{ name: 'add.png', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tạo cột mới</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="tableOption()">
|
||||
<SvgIcon v-bind="{ name: 'more.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Tùy chọn bảng</span
|
||||
>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-4" @click="saveSetting()">
|
||||
<SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Lưu thiết lập</span
|
||||
>
|
||||
</span>
|
||||
<!-- </template> -->
|
||||
<div class="panel-tabs mb-2">
|
||||
<a
|
||||
v-for="(v, i) in getMenu().filter((x) =>
|
||||
currentField.format === 'number'
|
||||
? currentField.formula
|
||||
? true
|
||||
: x.code !== 'formula'
|
||||
: !['filter', 'formula'].find((y) => y === x.code)
|
||||
)"
|
||||
:key="i"
|
||||
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
|
||||
@click="changeTab(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="currentTab === 'detail'">
|
||||
<p class="fs-14 mt-3">
|
||||
<strong> Tên trường: </strong> {{ currentField.name }}
|
||||
<a @click="copyContent(currentField.name)">
|
||||
<span class="tooltip">
|
||||
<SvgIcon
|
||||
class="ml-1"
|
||||
v-bind="{ name: 'copy.svg', type: 'primary', size: 16 }"
|
||||
></SvgIcon>
|
||||
<span
|
||||
class="tooltiptext"
|
||||
style="top: 60%; bottom: unset; min-width: max-content; left: 25px"
|
||||
>Copy</span
|
||||
>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<label class="label fs-14 mt-3">Mô tả<span class="has-text-danger"> *</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
class="input fs-14"
|
||||
type="text"
|
||||
@change="changeLabel($event.target.value)"
|
||||
v-model="label"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editLabel()">
|
||||
<SvgIcon v-bind="{ name: 'pen.svg', type: 'dark', size: 19 }"></SvgIcon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find((v) => v.name === 'label')">
|
||||
{{ errors.find((v) => v.name === "label").msg }}
|
||||
</p>
|
||||
<div class="field mt-3">
|
||||
<label class="label fs-14"
|
||||
>Kiểu dữ liệu<span class="has-text-danger"> * </span></label
|
||||
>
|
||||
<div class="control fs-14">
|
||||
<span class="mr-4" v-for="(v, i) in datatype">
|
||||
<span class="icon-text" v-if="radioType === v">
|
||||
<SvgIcon
|
||||
v-bind="{ name: 'radio-checked.svg', type: 'gray', size: 22 }"
|
||||
></SvgIcon>
|
||||
</span>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal" v-if="currentField.format === 'number'">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"
|
||||
>Đơn vị <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control">
|
||||
<SearchBox
|
||||
v-bind="{
|
||||
vdata: moneyunit,
|
||||
field: 'name',
|
||||
column: ['name'],
|
||||
first: true,
|
||||
position: 'is-top-left',
|
||||
}"
|
||||
@option="selected('_account', $event)"
|
||||
></SearchBox>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find((v) => v.name === 'unit')">
|
||||
{{ errors.find((v) => v.name === "unit").msg }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-narrow">
|
||||
<label class="label fs-14">Phần thập phân</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="decimal"
|
||||
@input="changeDecimal($event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Định dạng nâng cao</label>
|
||||
<p class="control fs-14">
|
||||
<span
|
||||
class="mr-4"
|
||||
v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
|
||||
>
|
||||
<a class="icon-text" @click="changeTemplate(v)">
|
||||
<SvgIcon
|
||||
v-bind="{
|
||||
name: `radio-${radioTemplate === v.code ? '' : 'un'}checked.svg`,
|
||||
type: 'gray',
|
||||
size: 22,
|
||||
}"
|
||||
>
|
||||
</SvgIcon>
|
||||
</a>
|
||||
{{ v.name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3" v-if="radioTemplate === 'option'">
|
||||
<button class="button is-primary is-small has-text-white" @click="showSidebar()">
|
||||
<span class="fs-14">{{
|
||||
`${currentField.template ? "Sửa" : "Tạo"} định dạng`
|
||||
}}</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="currentTab === 'value'">
|
||||
<ScrollBox
|
||||
v-bind="{
|
||||
data: props.filterData,
|
||||
name: props.field.name,
|
||||
maxheight: '380px',
|
||||
perpage: 20,
|
||||
}"
|
||||
@selected="doSelect"
|
||||
/>
|
||||
</div>
|
||||
<Modal
|
||||
v-bind="showmodal"
|
||||
v-if="showmodal"
|
||||
@label="changeLabel"
|
||||
@updatefields="updateFields"
|
||||
@close="close"
|
||||
></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
import ScrollBox from "~/components/datatable/ScrollBox";
|
||||
const store = useStore();
|
||||
const {
|
||||
$copy,
|
||||
$stripHtml,
|
||||
$clone,
|
||||
$arrayMove,
|
||||
$snackbar,
|
||||
$copyToClipboard,
|
||||
} = useNuxtApp();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object,
|
||||
filters: Object,
|
||||
filterData: Object,
|
||||
width: String,
|
||||
});
|
||||
const emit = defineEmits(["modalevent", "changepos", "close"]);
|
||||
var colorchoice = store.colorchoice;
|
||||
var errors = [];
|
||||
var currentTab = ref("value");
|
||||
var currentField = $copy(props.field);
|
||||
var pagedata = store[props.pagename];
|
||||
var fields = [];
|
||||
var label = currentField.label;
|
||||
var showmodal = ref();
|
||||
const checkFilter = function () {};
|
||||
const getMenu = function () {
|
||||
let field = currentField;
|
||||
field.disable = "display,tooltip";
|
||||
let arr = field.disable ? field.disable.split(",") : undefined;
|
||||
let array = arr
|
||||
? store.menuchoice.filter((v) => arr.findIndex((x) => x === v.code) < 0)
|
||||
: store.menuchoice;
|
||||
//if (store.login ? !(store.login.is_admin === false) : true) array = [array[0]];
|
||||
return array;
|
||||
};
|
||||
var selectTab = getMenu()[0];
|
||||
var datatype = store.datatype;
|
||||
var current = 1;
|
||||
var value1 = undefined;
|
||||
var value2 = undefined;
|
||||
var moneyunit = store.moneyunit;
|
||||
var radioType = store.datatype.find((v) => v.code === currentField.format);
|
||||
var selectUnit =
|
||||
currentField.format === "number"
|
||||
? moneyunit.find((v) => v.detail === currentField.unit)
|
||||
: undefined;
|
||||
var bgcolor = undefined;
|
||||
var radioBGcolor = colorchoice.find((v) => v.code === "none");
|
||||
var color = undefined;
|
||||
var radioColor = colorchoice.find((v) => v.code === "none");
|
||||
var textsize = undefined;
|
||||
var radioSize = colorchoice.find((v) => v.code === "none");
|
||||
var minwidth = undefined;
|
||||
var radioWidth = colorchoice.find((v) => v.code === "none");
|
||||
var radioMaxWidth = colorchoice.find((v) => v.code === "none");
|
||||
var maxwidth = undefined;
|
||||
var selectAlign = undefined;
|
||||
var radioAlign = colorchoice.find((v) => v.code === "none");
|
||||
var radioTemplate = ref(
|
||||
colorchoice.find((v) => v.code === (currentField.template ? "option" : "none"))["code"]
|
||||
);
|
||||
var selectPlacement = store.placement.find((v) => v.code === "is-right");
|
||||
var selectScheme = store.colorscheme.find((v) => v.code === "is-primary");
|
||||
var radioTooltip = store.colorchoice.find((v) => v.code === "none");
|
||||
var selectField = undefined;
|
||||
var tags = currentField.tags
|
||||
? currentField.tags.map((v) => fields.find((x) => x.name === v))
|
||||
: [];
|
||||
var formula = currentField.formula ? currentField.formula : undefined;
|
||||
var decimal = currentField.decimal;
|
||||
let shortmenu = store.menuchoice.filter((x) =>
|
||||
currentField.format === "number"
|
||||
? currentField.formula
|
||||
? true
|
||||
: x.code !== "formula"
|
||||
: !["filter", "formula"].find((y) => y === x.code)
|
||||
);
|
||||
var selectTab = shortmenu.find((v) => selectTab.code === v.code)
|
||||
? selectTab
|
||||
: menuchoice.find((v) => v.code === "value");
|
||||
var search = undefined;
|
||||
// if(selectTab.code==='value') {
|
||||
// let self = this
|
||||
// setTimeout(function() {self.$refs[currentField.name]? self.$refs[currentField.name].focus() : false}, 50)
|
||||
// }
|
||||
//==============================================================
|
||||
function moveLeft() {
|
||||
let copy = $clone(pagedata);
|
||||
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
let idx = i - 1 >= 0 ? i - 1 : copy.fields.length - 1;
|
||||
$arrayMove(copy.fields, i, idx);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("changepos");
|
||||
}
|
||||
function moveRight() {
|
||||
let copy = $clone(pagedata);
|
||||
let i = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
let idx = copy.fields.length - 1 > i ? i + 1 : 0;
|
||||
$arrayMove(copy.fields, i, idx);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("changepos");
|
||||
}
|
||||
function hideField() {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let found = copy.fields.find((v) => v.name === props.field.name);
|
||||
found.show = false;
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("close");
|
||||
}
|
||||
function doRemove() {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let idx = copy.fields.findIndex((v) => v.name === props.field.name);
|
||||
copy.fields.splice(idx, 1);
|
||||
copy.update = { fields: copy.fields };
|
||||
store.commit(props.pagename, copy);
|
||||
emit("close");
|
||||
}
|
||||
function fieldList() {
|
||||
showmodal.value = {
|
||||
component: "datatable/TableOption",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Danh sách cột",
|
||||
width: "50%",
|
||||
height: "630px",
|
||||
};
|
||||
}
|
||||
function tableOption() {
|
||||
showmodal.value = {
|
||||
component: "datatable/TableSetting",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Tùy chọn bảng",
|
||||
width: "40%",
|
||||
height: "400px",
|
||||
};
|
||||
}
|
||||
const getFields = function () {
|
||||
fields = pagedata ? $copy(pagedata.fields) : [];
|
||||
fields.map(
|
||||
(v) => (v.caption = (v.label ? v.label.indexOf("<") >= 0 : false) ? v.name : v.label)
|
||||
);
|
||||
};
|
||||
const doSelect = function (evt) {
|
||||
emit("modalevent", { name: "selected", data: evt[props.field.name] });
|
||||
};
|
||||
const changeLabel = function (text) {
|
||||
currentField.label = text;
|
||||
updateFields(currentField);
|
||||
};
|
||||
function editLabel() {
|
||||
showmodal.value = {
|
||||
component: "datatable/EditLabel",
|
||||
width: "500px",
|
||||
height: "300px",
|
||||
vbind: { label: label },
|
||||
};
|
||||
}
|
||||
const changeTemplate = function (v) {
|
||||
radioTemplate.value = v.code;
|
||||
let copy = $copy(currentField);
|
||||
copy.template = v.code;
|
||||
updateFields(copy);
|
||||
};
|
||||
function createField() {
|
||||
showmodal.value = {
|
||||
component: "datatable/NewField",
|
||||
vbind: { pagename: props.pagename },
|
||||
title: "Tạo cột mới",
|
||||
width: "50%",
|
||||
height: "630px",
|
||||
};
|
||||
}
|
||||
function copyContent(value) {
|
||||
$copyToClipboard(value);
|
||||
}
|
||||
function close() {
|
||||
showmodal.value = undefined;
|
||||
}
|
||||
const updateFields = function (field, type) {
|
||||
let copy = $clone(store[props.pagename]);
|
||||
let idx = copy.fields.findIndex((v) => v.name === field.name);
|
||||
copy.fields[idx] = field;
|
||||
store.commit(props.pagename, copy);
|
||||
};
|
||||
const changeTab = function (v) {
|
||||
currentTab.value = v.code;
|
||||
selectTab = v;
|
||||
};
|
||||
const saveSetting = function () {
|
||||
showmodal.value = {
|
||||
component: "datatable/MenuSave",
|
||||
vbind: { pagename: props.pagename, classify: 4 },
|
||||
title: "Lưu thiết lập",
|
||||
width: "500px",
|
||||
height: "400px",
|
||||
};
|
||||
};
|
||||
const showSidebar = function () {
|
||||
let event = { name: "template", field: currentField };
|
||||
let title = "Danh sách cột";
|
||||
if (event.name === "bgcolor")
|
||||
title = `Đổi màu nền: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
||||
else if (event.name === "color")
|
||||
title = `Đổi màu chữ: ${event.field.name} / ${$stripHtml(event.field.label, 30)}`;
|
||||
else if (event.name === "template")
|
||||
title = `Định dạng nâng cao: ${$stripHtml(event.field.label, 30)}`;
|
||||
showmodal.value = {
|
||||
component: "datatable/FormatOption",
|
||||
vbind: { event: event, currentField: currentField, pagename: props.pagename },
|
||||
width: "850px",
|
||||
height: "700px",
|
||||
title: title,
|
||||
};
|
||||
};
|
||||
function resizeWidth(minus) {
|
||||
let val = maxwidth || minwidth || 80;
|
||||
val = minus ? parseInt(val - 0.1 * val) : parseInt(val + 0.1 * val);
|
||||
if (val > 1000) return $snackbar("Độ rộng cột lớn hơn giới hạn cho phép");
|
||||
else if (val < 20) return $snackbar("Độ rộng cột nhỏ hơn giới hạn cho phép");
|
||||
radioMaxWidth = store.colorchoice.find((v) => v.code === "option");
|
||||
radioWidth = store.colorchoice.find((v) => v.code === "option");
|
||||
maxwidth = val;
|
||||
currentField.maxwidth = val;
|
||||
minwidth = val;
|
||||
currentField.minwidth = val;
|
||||
updateFields(currentField);
|
||||
}
|
||||
</script>
|
||||
431
components/datatable/CreateTemplate.vue
Normal file
431
components/datatable/CreateTemplate.vue
Normal file
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div v-if="docid">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label">Đối tượng</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in types" :key="i" v-model="type"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Kích cỡ</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in sizes.filter(v=>type? (type.code==='tag'? v.code!=='is-small' : 1>0) : true)" :key="i" v-model="size"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" v-if="['tag'].find(v=>v===type.code)">Hình khối</label>
|
||||
<p class="control fs-14" v-if="['tag'].find(v=>v===type.code)">
|
||||
<b-radio v-for="(v,i) in shapes" :key="i" v-model="shape"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal" v-if="['tag'].find(v=>v===type.code)">
|
||||
<div class="field-body">
|
||||
<div class="field" v-if="type.code!=='tag'">
|
||||
<label class="label">Outline</label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in outlines" :key="i" v-model="outline"
|
||||
:native-value="v" @input="changeType(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags" v-if="type.code==='tag'">
|
||||
<a :class="getClass(v)" v-for="(v,i) in colorscheme" :key="i"
|
||||
@click="doSelect(v)" :ref="'tag' + i"> {{v.name}} </a>
|
||||
</div>
|
||||
<div class="pt-2" v-else-if="type.code==='span'">
|
||||
<a class="mr-3" :class="getSpanClass(v)" v-for="(v,i) in colorscheme" :key="i"
|
||||
@click="doSelectSpan(v)" :ref="'span' + i"> {{v.name}} </a>
|
||||
</div>
|
||||
<div :class="`tabs is-boxed mt-5 mb-5 ${tab.code==='template'? '' : 'pb-2'}`">
|
||||
<ul>
|
||||
<li :class="tab.code===v.code? 'is-active' : ''"
|
||||
v-for="(v,i) in tabs" :key="i" @click="changeTab(v)"><a class="fs-15">{{v.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<template v-if="tab.code==='selected'">
|
||||
<a v-for="(v,i) in tags" :key="i" @click="selected=v">
|
||||
<div class="field is-grouped is-grouped-multiline mt-4">
|
||||
<p class="control">
|
||||
<a :class="v.class">
|
||||
{{v.name}}
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<input class="input is-small" type="text" v-model="v.name">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a @click="remove(i)">
|
||||
<SvgIcon v-bind="{name: 'close.svg', type: 'danger', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control has-text-right ml-5" v-if="selected? selected.id===v.id : false">
|
||||
<SvgIcon v-bind="{name: 'tick.svg', type: 'primary', size: 22}"></SvgIcon>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code==='condition'">
|
||||
<div class="mb-5" v-if="selected">
|
||||
<b-radio v-for="(v,i) in conditions" :key="i" v-model="condition"
|
||||
:native-value="v" @input="changeCondition(v)">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</div>
|
||||
|
||||
<template v-if="condition? condition.code==='yes' : false">
|
||||
<div class="field mt-3">
|
||||
<label class="label fs-14">Chọn trường xây dựng biểu thức <span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-taginput
|
||||
size="is-small"
|
||||
v-model="tagsField"
|
||||
:data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="name"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger has-text-weight-bold"> {{props.option.name}}</span>
|
||||
<span :class="tagsField.find(v=>v.id===props.option.id)? 'has-text-dark' : ''"> {{$stripHtml(props.option.label, 50)}} </span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tagsField')"> {{errors.find(v=>v.name==='tagsField').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-1" v-if="tagsField.length>0">
|
||||
<p class="help is-primary"> Click đúp vào để thêm vào biểu thức.</p>
|
||||
<div class="tagsField">
|
||||
<a @dblclick="expression = expression? (expression + ' ' + v.name) : v.name"
|
||||
class="tag is-rounded" v-for="(v,i) in tagsField" :key="i">
|
||||
<span class="tooltip">
|
||||
{{v.name}}
|
||||
<span class="tooltiptext">{{ $stripHtml(v.label) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Biểu thức có dạng Đúng / Sai <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" v-model="expression" placeholder="Tạo biểu thức tại đây">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='expression')"> {{errors.find(v=>v.name==='expression').message}} </p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code==='option' && selected">
|
||||
<div class="field is-horizontal border-bottom pb-2 mt-1">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Màu nền </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioBGcolor"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioBGcolor? radioBGcolor.code==='option' : false">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="bgcolor" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-horizontal border-bottom pb-2">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Màu chữ </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioColor"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioColor? radioColor.code==='option' : false">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="color" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal border-bottom pb-2">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Cỡ chữ </label>
|
||||
<p class="control fs-14">
|
||||
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioSize"
|
||||
:native-value="v" @input="changeStyle()">
|
||||
{{v.name}}
|
||||
</b-radio>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" v-if="radioSize? radioSize.code==='option' : false">
|
||||
<label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" placeholder="Nhập số" v-model="textsize" @change="changeStyle()">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab.code==='template'">
|
||||
<p class="mb-3">
|
||||
<a @click="copyContent()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{name: 'copy.svg', type: 'primary', siz: 18}"></SvgIcon>
|
||||
<span class="fs-16">Copy</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click="paste()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{name: 'pen1.svg', type: 'primary', siz: 18}"></SvgIcon>
|
||||
<span class="fs-16">Paste</span>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<div>
|
||||
<textarea class="textarea fs-14" rows="8" v-model="text" @dblclick="doCheck"></textarea>
|
||||
</div>
|
||||
<p class="mt-5">
|
||||
<span class="icon-text fsb-18">
|
||||
Replace
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 22}"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<div class="field is-grouped mt-4">
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Đoạn text</p>
|
||||
<input class="input" type="text" placeholder="" v-model="source">
|
||||
</div>
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Thay bằng</p>
|
||||
<input class="input" type="text" placeholder="" v-model="target">
|
||||
</div>
|
||||
<div class="control pl-5">
|
||||
<button class="button is-primary is-outlined mt-5" @click="replace()">Replace</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-5">
|
||||
<button class="button is-primary has-text-white" @click="changeTemplate()">Áp dụng</button>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from '@/stores/index'
|
||||
const store = useStore()
|
||||
const { $id, $copy, $empty, $stripHtml, $calc, $remove, $copyToClipboard } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object
|
||||
})
|
||||
var colorscheme = store.colorscheme
|
||||
var colorchoice = store.colorchoice
|
||||
var pageData = store[props.pagename]
|
||||
var field = props.field
|
||||
var type = undefined
|
||||
var size = undefined
|
||||
var types = [{code: 'span', name: 'span'}, {code: 'tag', name: 'tag'}]
|
||||
var sizes = [{code: 'is-small', name: 'Nhỏ', value: 'is-size-6'}, {code: 'is-normal', name: 'Trung bình', value: 'is-size-5'},
|
||||
{code: 'is-medium', name: 'Lớn', value: 'is-size-4'}]
|
||||
var shapes = [{code: 'default', name: 'Mặc định'}, {code: 'is-rounded', name: 'Tròn góc'}]
|
||||
var shape = undefined
|
||||
var outlines = [{code: 'default', name: 'Mặc định'}, {code: 'is-outlined', name: 'Outline'}]
|
||||
var outline = undefined
|
||||
var conditions = [{code: 'no', name: 'Không áp dụng'}, {code: 'yes', name: 'Có áp dụng'}]
|
||||
var condition = undefined
|
||||
var tags = []
|
||||
var selected = undefined
|
||||
var tabs = [{code: 'selected', name: 'Bước 1: Tạo nội dung'}, {code: 'condition', name: 'Bước 2: Đặt điều kiện'}, {code: 'option', name: 'Bước 3: Chọn màu, cỡ chữ'},
|
||||
{code: 'template', name: 'Bước 4: Mã lệnh & áp dụng'}]
|
||||
var tab = ref(undefined)
|
||||
var tagsField = []
|
||||
var errors = []
|
||||
var expression = ''
|
||||
var text = ref(null)
|
||||
var radioBGcolor = undefined
|
||||
var radioColor = undefined
|
||||
var radioSize = undefined
|
||||
var bgcolor = undefined
|
||||
var color = undefined
|
||||
var textsize = undefined
|
||||
var source = undefined
|
||||
var target = $copy(field.name)
|
||||
|
||||
const initData = function() {
|
||||
type = types.find(v=>v.code==='tag')
|
||||
size = sizes.find(v=>v.code==='is-normal')
|
||||
shape = shapes.find(v=>v.code==='is-rounded')
|
||||
outline = shapes.find(v=>v.code==='default')
|
||||
if($empty(field.template)) tab.value =tabs.find(v=>v.code==='selected')
|
||||
else {
|
||||
text.value =$copy(field.template)
|
||||
tab.value =tabs.find(v=>v.code==='template')
|
||||
}
|
||||
condition =conditions.find(v=>v.code==='no')
|
||||
}
|
||||
/*watch: {
|
||||
expression: function(newVal) {
|
||||
if($empty(newVal)) return
|
||||
elsecheckExpression()
|
||||
},
|
||||
tab: function(newVal, oldVal) {
|
||||
if(oldVal===undefined) return
|
||||
if(newVal.code==='template') {
|
||||
let value = '<div>'
|
||||
tags.map((v,i)=>{
|
||||
value += '<span class="' + v.class + (tags.length>i+1? ' mr-2' : '') + '" '
|
||||
if(v.style) value += 'style="' + v.style + '" '
|
||||
value += (v.expression? ' v-if="' + v.expression + '"' : '') + '>' + v.name + '</span>'
|
||||
})
|
||||
value += '</div>'
|
||||
text = value
|
||||
} else if(newVal.code==='option') {
|
||||
if(!selected) return
|
||||
radioBGcolor =selected.bgcolor?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
radioColor =selected.color?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
radioSize =selected.textsize?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
|
||||
bgcolor =selected.bgcolor?selected.bgcolor : undefined
|
||||
color =selected.color?selected.color : undefined
|
||||
textsize =selected.textsize?selected.textsize : undefined
|
||||
} else if(newVal.code==='condition') {
|
||||
condition = conditions.find(v=>v.code==='no')
|
||||
tagsField = []
|
||||
expression = ''
|
||||
if(selected?selected.expression : false) {
|
||||
condition =conditions.find(v=>v.code==='yes')
|
||||
tagsField =$copy(selected.tags)
|
||||
expression =$copy(selected.formula)
|
||||
}
|
||||
}
|
||||
}
|
||||
},*/
|
||||
function changeTab(v) {
|
||||
tab.value = v
|
||||
}
|
||||
const paste = async function() {
|
||||
text.value = await navigator.clipboard.readText()
|
||||
}
|
||||
const replace = function() {
|
||||
if($empty(text.value)) return
|
||||
text.value =text.value.replaceAll(source,target)
|
||||
}
|
||||
const doCheck = function() {
|
||||
let text = window.getSelection().toString()
|
||||
if($empty(text)) return
|
||||
source = text
|
||||
}
|
||||
const changeStyle = function() {
|
||||
selected.bgcolor =selected.color =selected.textsize =selected.style = undefined
|
||||
let style = ''
|
||||
if(radioBGcolor.code==='option'? !$empty(bgcolor) : false) {
|
||||
selected.bgcolor =bgcolor
|
||||
style += 'background-color: ' +bgcolor + ' !important; '
|
||||
}
|
||||
if(radioColor.code==='option'? !$empty(color) : false) {
|
||||
selected.color =color
|
||||
style += 'color: ' +color + ' !important; '
|
||||
}
|
||||
if(radioSize.code==='option'?$isNumber(textsize) : false) {
|
||||
selected.textsize =textsize
|
||||
style += 'font-size: ' +textsize + 'px !important; '
|
||||
}
|
||||
$empty(style)? false :selected.style = style
|
||||
}
|
||||
const changeCondition = function(v) {
|
||||
if(v.code==='no')selected.expression = undefined
|
||||
}
|
||||
const copyContent = function() {
|
||||
$copyToClipboard(text.value)
|
||||
}
|
||||
const changeTemplate = function() {
|
||||
let copy = pageData
|
||||
let found = copy.fields.find(v=>v.name===field.name)
|
||||
found.template = text.value
|
||||
store.commit(props.pagename, copy)
|
||||
}
|
||||
const checkExpression = function() {
|
||||
errors = []
|
||||
let val =$copy(expression)
|
||||
let exp =$copy(expression)
|
||||
tagsField.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
exp = exp.replace(myRegExp, "formatNumber(row['" + v.name + "'])")
|
||||
})
|
||||
try {
|
||||
let value =$calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(!(eval(value)===true || eval(value)===false)) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(selected) {
|
||||
selected.expression = exp
|
||||
selected.formula =expression
|
||||
selected.tags =$copy(tagsField)
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
returnerrors.length>0? false : true
|
||||
}
|
||||
const changeType = function(v) {
|
||||
}
|
||||
const doSelect = function(v) {
|
||||
tags.push({id:$id(), name: v.name, class:getClass(v)})
|
||||
tab =tabs.find(v=>v.code==='selected')
|
||||
selected =tags[tags.length-1]
|
||||
}
|
||||
const doSelectSpan = function(v) {
|
||||
tags.push({id:$id(), name: v.name, class:getSpanClass(v)})
|
||||
tab =tabs.find(v=>v.code==='selected')
|
||||
selected =tags[tags.length-1]
|
||||
}
|
||||
const remove = function(i) {
|
||||
$remove(tags, i)
|
||||
}
|
||||
const getClass = function(v) {
|
||||
let value =type.code + ' ' + v.code + ' ' +size.code + (shape.code==='default'? '' : ' ' +shape.code)
|
||||
value += (outline.code==='default'? '' : ' ' +outline.code)
|
||||
return value
|
||||
}
|
||||
const getSpanClass = function(v) {
|
||||
let value = 'has-text-' + v.name.toLowerCase() + ' ' +size.value
|
||||
return value
|
||||
}
|
||||
initData()
|
||||
var docid = $id()
|
||||
</script>
|
||||
193
components/datatable/DataModel.vue
Normal file
193
components/datatable/DataModel.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-2">
|
||||
<Caption class="mb-2" v-bind="{title: 'Tên model (bảng)', type: 'has-text-warning'}"></Caption>
|
||||
<div class="mb-2">
|
||||
<input class="input" v-model="text" placeholder="Tìm model" @change="findModel()">
|
||||
</div>
|
||||
<div style="max-height: 80vh; overflow: auto;">
|
||||
<div :class="`py-1 border-bottom is-clickable ${current.model===v.model? 'has-background-primary has-text-white' : ''}`"
|
||||
v-for="v in displayData" @click="changeMenu(v)">
|
||||
{{ v.model}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-10 py-0 px-0">
|
||||
<div class="tabs mb-3">
|
||||
<ul>
|
||||
<li :class="`${v.code===tab? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`" v-for="v in tabs">
|
||||
<a @click="changeTab(v)">{{v.name}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="tab==='datatype'">
|
||||
<Caption class="mb-2" v-bind="{title: 'Kiểu dữ liệu (type)', type: 'has-text-warning'}"></Caption>
|
||||
<div style="max-height:75vh; overflow-y: auto;">
|
||||
<div class="py-1 border-bottom is-clickable" v-for="x in current.fields">
|
||||
{{ x.name}}
|
||||
<span class="ml-6 has-text-grey">{{ x.type }}</span>
|
||||
<a class="ml-6 has-text-primary" v-if="x.model" @click="openModel(x)">{{ x.model }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else-if="tab==='table'">
|
||||
<div class="columns mx-0 mb-0 pb-0">
|
||||
<div class="column is-5">
|
||||
<Caption class="mb-1" v-bind="{title: 'Values', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="values" placeholder="Tên trường không chứa dấu cách, vd: code,name">
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<Caption class="mb-1" v-bind="{title: 'Filter', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="filter" placeholder="{'code': 'xyz'}">
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<Caption class="mb-1" v-bind="{title: 'Sort', type: 'has-text-warning'}"></Caption>
|
||||
<input class="input" rows="1" v-model="sort" placeholder="vd: -code,name">
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<Caption class="mb-1" v-bind="{title: 'Load', type: 'has-text-warning'}"></Caption>
|
||||
<div>
|
||||
<button class="button is-primary has-text-white" @click="loadData()">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Caption class="mb-1" v-bind="{title: 'Query', type: 'has-text-warning'}"></Caption>
|
||||
<div class="mb-2">
|
||||
{{ query }}
|
||||
<a class="has-text-primary ml-5" @click="copy()">copy</a>
|
||||
<p>{{apiUrl}}
|
||||
<a class="has-text-primary ml-5" @click="$copyToClipboard(apiUrl)">copy</a>
|
||||
<a class="has-text-primary ml-5" target="_blank" :href="apiUrl">open</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<DataTable v-bind="{pagename: pagename}" v-if="pagedata" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else>
|
||||
<img id="image" :src="filePath" alt="">
|
||||
<p class="pl-5">
|
||||
<a class="mr-5" @click="downloadFile()">
|
||||
<SvgIcon v-bind="{name: 'download.svg', type: 'black', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
<a target="_blank" :href="filePath">
|
||||
<SvgIcon v-bind="{name: 'open.svg', type: 'black', size: 24}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
const { $getdata, $getapi, $createField, $clone, $getpage, $empty, $copyToClipboard, $find, $multiSort, $download, $getpath } = useNuxtApp()
|
||||
const store = useStore()
|
||||
var pagename = 'pagedata3'
|
||||
var pagedata = ref()
|
||||
pagedata.value = $getpage()
|
||||
pagedata.value.perPage = 10
|
||||
store.commit(pagename, pagedata)
|
||||
let list = ['LogEntry', 'Permission', 'ContentType', 'Session', 'Group']
|
||||
var data = (await $getdata('getmodel')).filter(v=>list.findIndex(x=>x===v.model)<0)
|
||||
data = $multiSort(data, {model: 'asc'})
|
||||
var current = ref({fields: []})
|
||||
var tabs = [{code: 'datatype', name: 'Kiểu dữ liệu'}, {code: 'table', name: 'Dữ liệu'}, {code: 'datamodel', name: 'Data model'}]
|
||||
var tab = ref('datatype')
|
||||
var datatable = ref()
|
||||
var query = ref()
|
||||
var values, filter
|
||||
var apiUrl = ref()
|
||||
var showmodal = ref()
|
||||
var text = null
|
||||
var displayData = ref(data)
|
||||
var filePath = `${$getpath()}static/files/datamodel.png`
|
||||
var sort = "-id"
|
||||
current.value = data[0]
|
||||
function changeMenu(v) {
|
||||
values = undefined
|
||||
filter = undefined
|
||||
sort = undefined
|
||||
current.value = v
|
||||
if(tab.value==='table') loadData()
|
||||
}
|
||||
async function changeTab(v) {
|
||||
tab.value = v.code
|
||||
if(v.code==='table') loadData()
|
||||
}
|
||||
async function loadData() {
|
||||
let vfilter = filter? filter.trim() : undefined
|
||||
if(vfilter) {
|
||||
try {
|
||||
vfilter = JSON.parse(vfilter)
|
||||
} catch (error) {
|
||||
alert('Cấu trúc filter có lỗi')
|
||||
vfilter = undefined
|
||||
}
|
||||
}
|
||||
let params = {values: $empty(values)? undefined : values.trim(), filter: filter, sort: $empty(sort)? undefined : sort.trim()}
|
||||
let modelName = current.value.model
|
||||
let found = {name: modelName.toLowerCase().replace('_', ''), url: `data/${modelName}/`, url_detail: `data-detail/${modelName}/`, params: params}
|
||||
query.value = $clone(found)
|
||||
let rs = await $getapi([found])
|
||||
if(rs==='error') return alert('Đã xảy ra lỗi, hãy xem lại câu lệnh.')
|
||||
datatable.value = rs[0].data.rows
|
||||
showData()
|
||||
|
||||
// api query
|
||||
const baseUrl = $getpath() + `${query.value.url}`
|
||||
apiUrl.value = baseUrl
|
||||
let vparams = !$empty(values)? {values: values} : null
|
||||
if(!$empty(filter)) {
|
||||
vparams = vparams? {values: values, filter:filter} : {filter:filter}
|
||||
}
|
||||
if(!$empty(sort)) {
|
||||
if(vparams) {
|
||||
vparams.sort = sort.trim()
|
||||
} else {
|
||||
vparams = {sort: sort.trim()}
|
||||
}
|
||||
}
|
||||
if(vparams) {
|
||||
let url = new URL(baseUrl);
|
||||
let searchParams = new URLSearchParams(vparams);
|
||||
url.search = searchParams.toString();
|
||||
apiUrl.value = baseUrl + url.search
|
||||
}
|
||||
}
|
||||
function showData() {
|
||||
let arr = []
|
||||
if(!$empty(values)) {
|
||||
let arr1 = values.trim().split(',')
|
||||
arr1.map(v=>{
|
||||
let val = v.trim()
|
||||
let field = $createField(val, val, 'string', true)
|
||||
arr.push(field)
|
||||
})
|
||||
} else {
|
||||
current.value.fields.map(v=>{
|
||||
let field = $createField(v.name, v.name, 'string', true)
|
||||
arr.push(field)
|
||||
})
|
||||
}
|
||||
let clone = $clone(pagedata.value)
|
||||
clone.fields = arr
|
||||
clone.data = datatable.value
|
||||
pagedata.value = undefined
|
||||
setTimeout(()=>pagedata.value = clone)
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(query.value))
|
||||
}
|
||||
function openModel(x) {
|
||||
showmodal.value = {component: 'datatable/ModelInfo', title: x.model, width: '70%', height: '600px',
|
||||
vbind: {data: data, info: $find(data, {model: x.model})}}
|
||||
}
|
||||
function downloadFile() {
|
||||
$download(`${$getpath()}download/?name=datamodel.png&type=file`, 'datamodel.png')
|
||||
}
|
||||
function findModel() {
|
||||
if($empty(text)) return displayData.value = data
|
||||
displayData.value = data.filter(v=>v.model.toLowerCase().indexOf(text.toLowerCase())>=0)
|
||||
}
|
||||
</script>
|
||||
422
components/datatable/DataTable.vue
Normal file
422
components/datatable/DataTable.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div class="field is-grouped is-grouped-multiline pl-2" v-if="filters? filters.length>0 : false">
|
||||
<div class="control mr-5">
|
||||
<a class="button is-primary is-small has-text-white has-text-weight-bold" @click="updateData({filters: []})">
|
||||
<span class="fs-14">Xóa lọc</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control pr-2 mr-5">
|
||||
<span class="icon-text">
|
||||
<SvgIcon v-bind="{name: 'sigma.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
<span class="fsb-18 has-text-primary">{{totalRows}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-for="(v,i) in filters" :key="i">
|
||||
<div class="tags has-addons is-marginless">
|
||||
<a class="tag is-primary has-text-white is-marginless" @click="showCondition(v)">{{v.label.indexOf('>')>=0? $stripHtml(v.label,30) : v.label}}</a>
|
||||
<a class="tag is-delete is-marginless has-text-black-bis" @click="removeFilter(i)"></a>
|
||||
</div>
|
||||
<span class="help has-text-black-bis">
|
||||
{{v.sort? v.sort : (v.select? ('[' + (v.select.length>0? $stripHtml(v.select[0],20) : '') + '...Σ' + v.select.length + ']') :
|
||||
(v.condition))}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container mb-0" ref="container" id="docid">
|
||||
<table class="table is-fullwidth is-bordered is-narrow is-hoverable" :style="tableStyle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(field,i) in displayFields" :key="i" :style="field.headerStyle">
|
||||
<div @click="showField(field)" :style="field.dropStyle">
|
||||
<a v-if="field.label.indexOf('<')<0">{{field.label}}</a>
|
||||
<a v-else>
|
||||
<component :is="dynamicComponent(field.label)" :row="v" @clickevent="clickEvent($event, v, field)" />
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(v,i) in displayData" :key="i">
|
||||
<td v-for="(field, j) in displayFields" :key="j" :id="`${field.name}`" :style="v[`${field.name}color`]"
|
||||
@dblclick="doubleClick(field, v)">
|
||||
<component :is="dynamicComponent(field.template)" :row="v" v-if="field.template" @clickevent="clickEvent($event, v, field)" />
|
||||
<span v-else>{{ v[field.name] }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<DatatablePagination v-bind="{data: data, perPage: perPage}" @changepage="changePage" v-if="showPaging"></DatatablePagination>
|
||||
</div>
|
||||
<Modal @close="close" @selected="doSelect" @confirm="confirmRemove" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { createApp } from "vue/dist/vue.esm-bundler.js"
|
||||
import { ref, defineComponent } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
const emit = defineEmits(['edit', 'insert', 'dataevent'])
|
||||
const { $copy, $empty, $unique, $multiSort, $remove, $calc, $calculate, $find, $formatNumber, $stripHtml, $calculateData, $deleterow } = useNuxtApp()
|
||||
const store = useStore()
|
||||
var props = defineProps({
|
||||
pagename: String
|
||||
})
|
||||
function dynamicComponent(htmlString) {
|
||||
return defineComponent({
|
||||
template: htmlString,
|
||||
props: {
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
var timer = undefined
|
||||
var showPaging = ref(false)
|
||||
var totalRows = ref(0)
|
||||
var currentPage = 1
|
||||
var displayFields = ref([])
|
||||
var displayData = []
|
||||
var pagedata = store[props.pagename]
|
||||
var tablesetting = $copy(pagedata.tablesetting || store.tablesetting)
|
||||
var perPage = Number($find(tablesetting, {code: 'per-page'}, 'detail')) || 20
|
||||
var filters = $copy(pagedata.filters || [])
|
||||
var currentField
|
||||
var filterData = []
|
||||
var currentsetting
|
||||
var scrollbar
|
||||
var fields
|
||||
var currentRow
|
||||
var data = $copy(pagedata.data)
|
||||
var showmodal = ref()
|
||||
watch(() => store[props.pagename], (newVal, oldVal) => {
|
||||
updateChange()
|
||||
})
|
||||
function updateChange() {
|
||||
pagedata = store[props.pagename]
|
||||
if(!pagedata.update) return
|
||||
if(pagedata.update.data) data = $copy(pagedata.update.data)
|
||||
if(pagedata.update.filters) {
|
||||
doFilter(pagedata.update.filters)
|
||||
updateShow()
|
||||
return //exit
|
||||
}
|
||||
if(filters.length>0) doFilter(filters)
|
||||
if(pagedata.update.fields || pagedata.update.data) updateShow()
|
||||
}
|
||||
const updateShow = function(full_data) {
|
||||
let arr = pagedata.fields.filter(v=>v.show)
|
||||
if(full_data===false) displayData = $copy(data)
|
||||
else displayData = $copy(data.filter((ele,index) => (index>=(currentPage-1)*perPage && index<currentPage*perPage)))
|
||||
displayData.map(v=>{
|
||||
arr.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
arr.map(v=>{
|
||||
v.headerStyle = getSettingStyle('header', v)
|
||||
v.dropStyle = getSettingStyle('dropdown', v)
|
||||
})
|
||||
displayFields.value = arr
|
||||
showPagination()
|
||||
}
|
||||
function confirmRemove() {
|
||||
$deleterow(pagedata.api.name, currentRow.id, props.pagename, true)
|
||||
}
|
||||
const clickEvent = function(event, row, field) {
|
||||
let name = typeof event === "string"? event : event.name
|
||||
let data = typeof event === "string"? event : event.data
|
||||
if(name==='remove') {
|
||||
currentRow = row
|
||||
showmodal.value = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa bản ghi này không?', duration: 10},
|
||||
title: 'Xác nhận', width: '500px', height: '100px'}
|
||||
}
|
||||
emit(name, row, field, data)
|
||||
}
|
||||
const showField = async function(field) {
|
||||
if(pagedata.contextMenu===false || field.menu==='no') return
|
||||
currentField = field
|
||||
filterData = $unique(pagedata.data, [field.name])
|
||||
//let doc = this.$refs[`th${field.name}`]
|
||||
//let width = (doc? doc.length>0 : false)? doc[0].getBoundingClientRect().width : 100
|
||||
let width = 100
|
||||
if(pagedata.setting) currentsetting = $copy(pagedata.setting)
|
||||
showmodal.value = {vbind: {pagename: props.pagename, field: field, filters: filters, filterData: filterData, width: width},
|
||||
component: 'datatable/ContextMenu', title: field.name, width: '650px', height: '500px'} //$stripHtml(field.label)
|
||||
}
|
||||
const getStyle = function(field, record) {
|
||||
var stop = false
|
||||
let val = tablesetting.find(v=>v.code==='td-border')? tablesetting.find(v=>v.code==='td-border').detail
|
||||
: 'border: solid 1px rgb(44, 44, 44); '
|
||||
val = val.indexOf(';')>=0? val : val + ';'
|
||||
if(field.bgcolor? !Array.isArray(field.bgcolor) : false) {
|
||||
val += ` background-color:${field.bgcolor}; `
|
||||
} else if(field.bgcolor? Array.isArray(field.bgcolor) : false) {
|
||||
field.bgcolor.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` background-color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
} else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` background-color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
stop = false
|
||||
if(field.color? !Array.isArray(field.color) : false) {
|
||||
val += ` color:${field.color}; `
|
||||
} else if(field.color? Array.isArray(field.color) : false) {
|
||||
field.color.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
} else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` color:${v.color}; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
stop = false
|
||||
if(field.textsize? !Array.isArray(field.textsize) : false) {
|
||||
val += ` font-size:${field.textsize}px; `
|
||||
} else if(field.textsize? Array.isArray(field.textsize) : false) {
|
||||
field.textsize.map(v=>{
|
||||
if(v.type==='search') {
|
||||
if(record[field.name] && !stop? record[field.name].toLowerCase().indexOf(v.keyword.toLowerCase())>=0 : false) {
|
||||
val += ` font-size:${v.size}px; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
else {
|
||||
let res = $calculate(record, v.tags, v.expression)
|
||||
if(res.success && res.value && !stop) {
|
||||
val += ` font-size:${v.size}px; `
|
||||
stop = true
|
||||
}
|
||||
}
|
||||
})
|
||||
} else val += ` font-size:${tablesetting.find(v=>v.code==='table-font-size').detail}px;`
|
||||
if(field.textalign) val += ` text-align:${field.textalign}; `
|
||||
if(field.minwidth) val += ` min-width:${field.minwidth}px; `
|
||||
if(field.maxwidth) val += ` max-width:${field.maxwidth}px; `
|
||||
return val
|
||||
}
|
||||
const getSettingStyle = function(name, field) {
|
||||
let value = ''
|
||||
if(name==='container') {
|
||||
value = 'min-height:' + tablesetting.find(v=>v.code==='container-height').detail + 'rem; '
|
||||
} else if(name==='table') {
|
||||
value += 'background-color:' + tablesetting.find(v=>v.code==='table-background').detail + '; '
|
||||
value += 'font-size:' + tablesetting.find(v=>v.code==='table-font-size').detail + 'px;'
|
||||
value += 'color:' + tablesetting.find(v=>v.code==='table-font-color').detail + '; '
|
||||
} else if(name==='header') {
|
||||
value += 'background-color:' + tablesetting.find(v=>v.code==='header-background').detail + '; '
|
||||
if(field.minwidth) value += ' min-width: ' + field.minwidth + 'px; '
|
||||
if(field.maxwidth) value += ' max-width: ' + field.maxwidth + 'px; '
|
||||
} else if(name==='menu') {
|
||||
let arg = tablesetting.find(v=>v.code==='menu-width').detail
|
||||
arg = field? (field.menuwidth? field.menuwidth : arg) : arg
|
||||
value += 'width:' + arg + 'rem; '
|
||||
value += 'min-height:' + tablesetting.find(v=>v.code==='menu-min-height').detail + 'rem; '
|
||||
value += 'max-height:' + tablesetting.find(v=>v.code==='menu-max-height').detail + 'rem; '
|
||||
value += "overflow:auto; "
|
||||
} else if(name==='dropdown') {
|
||||
value += 'font-size:' + tablesetting.find(v=>v.code==='header-font-size').detail + 'px; '
|
||||
let found = filters.find(v=>v.name===field.name)
|
||||
found? value += 'color:' + tablesetting.find(v=>v.code==='header-filter-color').detail + '; '
|
||||
:value += 'color:' + tablesetting.find(v=>v.code==='header-font-color').detail + '; '
|
||||
}
|
||||
return value
|
||||
}
|
||||
function changePage(page) {
|
||||
currentPage = page
|
||||
updateShow()
|
||||
}
|
||||
const showPagination = function() {
|
||||
showPaging.value = pagedata.pagination===false? false : true
|
||||
totalRows.value = data.length
|
||||
if(showPaging.value && pagedata.api) {
|
||||
if(pagedata.api.full_data===false) totalRows.value = pagedata.api.total_rows
|
||||
showPaging.value = totalRows.value > perPage
|
||||
}
|
||||
}
|
||||
const close = function() {
|
||||
showmodal.value = undefined
|
||||
}
|
||||
const frontendFilter = function(newVal) {
|
||||
let checkValid = function(name, x, filter) {
|
||||
if($empty(x[name])) return false
|
||||
else {
|
||||
let text = ''
|
||||
filter.map((y,k)=>{
|
||||
text += `${k>0? (filter[k-1].operator==='and'? ' &&' : ' ||') : ''} ${$formatNumber(x[name])}
|
||||
${y.condition==='='? '==' : (y.condition==='<>'? '!==' : y.condition)} ${$formatNumber(y.value)}`
|
||||
})
|
||||
return $calc(text)
|
||||
}
|
||||
}
|
||||
newVal = $copy(newVal)
|
||||
var data = $copy(pagedata.data)
|
||||
newVal.filter(m=>m.select || m.filter).map(v => {
|
||||
if(v.select) {
|
||||
data = data.filter(x => v.select.findIndex(y => $empty(y)? $empty(x[v.name]) : (y===x[v.name])) >-1)
|
||||
} else if(v.filter) {
|
||||
data = data.filter(x => checkValid(v.name, x, v.filter))
|
||||
}
|
||||
})
|
||||
let sort = {}
|
||||
let format = {}
|
||||
let list = filters.filter(x=>x.sort)
|
||||
list.map(v=>{
|
||||
sort[v.name] = v.sort === "az" ? "asc" : "desc"
|
||||
format[v.name] = v.format;
|
||||
})
|
||||
return list.length>0? $multiSort(data, sort, format) : data
|
||||
}
|
||||
const backendFilter = function(newVal) {
|
||||
|
||||
}
|
||||
const doFilter = function(newVal, nonset) {
|
||||
if(currentPage>1 && nonset!==true) currentPage = 1
|
||||
if(pagedata.api.full_data) {
|
||||
data = frontendFilter(newVal)
|
||||
pagedata.dataFilter = $copy(data)
|
||||
store.commit(props.pagename, pagedata)
|
||||
emit('changedata', newVal)
|
||||
}
|
||||
else {
|
||||
if(timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => backendFilter(newVal), 200)
|
||||
}
|
||||
pagedata.filters = newVal
|
||||
store.commit(props.pagename, pagedata)
|
||||
emit('changefilter', newVal? newVal.length>0 : false)
|
||||
}
|
||||
const doSelect = function(value) {
|
||||
showmodal.value = undefined
|
||||
let field = currentField
|
||||
let found = filters.find(v=>v.name===field.name)
|
||||
if(found) {
|
||||
!found.select? found.select = [] : false
|
||||
let idx = found.select.findIndex(x=>x===value)
|
||||
idx>=0? $remove(found.select, idx) : found.select.push(value)
|
||||
if(found.select.length===0) {
|
||||
idx = filters.findIndex(v=>v.name===field.name)
|
||||
if(idx>=0) $remove(filters, idx)
|
||||
}
|
||||
} else {
|
||||
filters.push({name: field.name, label: field.label, select: [value], format: field.format})
|
||||
}
|
||||
doFilter(filters)
|
||||
updateShow()
|
||||
}
|
||||
const doubleScroll = function(element) {
|
||||
var _scrollbar= document.createElement('div');
|
||||
_scrollbar.appendChild(document.createElement('div'));
|
||||
_scrollbar.style.overflow= 'auto';
|
||||
_scrollbar.style.overflowY= 'hidden';
|
||||
_scrollbar.firstChild.style.width= element.scrollWidth+'px';
|
||||
_scrollbar.firstChild.style.height = '1px'
|
||||
_scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
|
||||
var running = false;
|
||||
_scrollbar.onscroll= function() {
|
||||
if(running) {
|
||||
running = false;
|
||||
return;
|
||||
}
|
||||
running = true;
|
||||
element.scrollLeft= _scrollbar.scrollLeft;
|
||||
};
|
||||
element.onscroll= function() {
|
||||
if(running) {
|
||||
running = false;
|
||||
return;
|
||||
}
|
||||
running = true;
|
||||
_scrollbar.scrollLeft= element.scrollLeft;
|
||||
}
|
||||
element.parentNode.insertBefore(scrollbar, element)
|
||||
_scrollbar.scrollLeft= element.scrollLeft
|
||||
scrollbar = _scrollbar
|
||||
}
|
||||
const removeFilter = function(i) {
|
||||
$remove(filters, i)
|
||||
doFilter(filters)
|
||||
updateShow()
|
||||
}
|
||||
const scrollbarVisible = function() {
|
||||
let element = this.$refs['container']
|
||||
if(!element) return
|
||||
let result = element.scrollWidth > element.clientWidth? true : false
|
||||
if(scrollbar) {
|
||||
element.parentNode.removeChild(scrollbar)
|
||||
scrollbar = undefined
|
||||
}
|
||||
if(result) doubleScroll(element)
|
||||
}
|
||||
const updateData = async function(newVal) {
|
||||
if(newVal.columns) { //change attribute
|
||||
fields = $copy(newVal.columns)
|
||||
let _fields = fields.filter(v=>v.show)
|
||||
data.map(v=>{
|
||||
_fields.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
return updateShow()
|
||||
}
|
||||
if(newVal.tablesetting) {
|
||||
tablesetting = newVal.tablesetting
|
||||
perPage = $formatNumber(tablesetting.find(v=>v.code=="per-page").detail)
|
||||
currentPage = 1
|
||||
}
|
||||
tablesetting = $copy(pagedata.tablesetting || gridsetting)
|
||||
if(tablesetting) {
|
||||
perPage = pagedata.perPage? pagedata.perPage : Number(tablesetting.find(v=>v.code==='per-page').detail)
|
||||
}
|
||||
if(newVal.fields) {
|
||||
fields = $copy(newVal.fields)
|
||||
} else fields = $copy(pagedata.fields)
|
||||
if(newVal.data || newVal.fields) {
|
||||
let copy = $copy(newVal.data || data)
|
||||
this.data = $calculateData(copy, fields)
|
||||
let fields = fields.filter(v=>v.show)
|
||||
data.map(v=>{
|
||||
fields.map(x=>v[`${x.name}color`] = getStyle(x, v))
|
||||
})
|
||||
}
|
||||
if(newVal.filters) filters = $copy(newVal.filters)
|
||||
else if(pagedata.filters) filters = $copy(pagedata.filters)
|
||||
if(newVal.data || newVal.fields || newVal.filters) {
|
||||
let copy = $copy(filters)
|
||||
filters.map((v,i)=>{
|
||||
let idx = $findIndex(fields, {name: v.name})
|
||||
let index = $findIndex(copy, {name: v.name})
|
||||
if(idx<0 && index>=0) $delete(copy, index)
|
||||
else if(idx>=0 && index>=0) copy[index].label = fields[idx].label
|
||||
})
|
||||
filters = copy
|
||||
doFilter(filters)
|
||||
}
|
||||
if(newVal.data || newVal.fields || newVal.filters || newVal.tablesetting) updateShow()
|
||||
if(newVal.data || newVal.fields) setTimeout(()=> scrollbarVisible(), 100)
|
||||
if(newVal.highlight) setTimeout(()=>highlight(newVal.highlight), 50)
|
||||
}
|
||||
const doubleClick = function(field, v) {
|
||||
currentField = field
|
||||
doSelect(v[field.name])
|
||||
}
|
||||
var tableStyle = getSettingStyle('table')
|
||||
setTimeout(()=> updateShow(), 200)
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.table tbody tr:hover td, .table tbody tr:hover th) {
|
||||
background-color: hsl(0, 0%, 78%);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
402
components/datatable/DataView.vue
Normal file
402
components/datatable/DataView.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<TimeOption
|
||||
v-bind="{ pagename: vpagename, api: api, timeopt: timeopt, filter: optfilter, importdata: props.importdata, newDataAvailable: newDataAvailable, params: vparams }"
|
||||
ref="timeopt" @option="timeOption" @excel="exportExcel" @add="insert" @manual-refresh="manualRefresh" @refresh-data="refreshData"
|
||||
@import="openImportModal" class="mb-3" v-if="timeopt"></TimeOption>
|
||||
<DataTable v-bind="{ pagename: vpagename }" @edit="edit" @insert="insert" @dataevent="dataEvent" v-if="pagedata" />
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TimeOption from '~/components/datatable/TimeOption'
|
||||
import { useStore } from '~/stores/index'
|
||||
import { ref, watch, onBeforeUnmount } from 'vue'
|
||||
|
||||
const emit = defineEmits(['modalevent', 'dataevent', 'dataUpdated'])
|
||||
const store = useStore()
|
||||
|
||||
const props = defineProps({
|
||||
pagename: String,
|
||||
api: String,
|
||||
setting: String,
|
||||
filter: Object,
|
||||
params: Object,
|
||||
data: Object,
|
||||
modal: Object,
|
||||
timeopt: Object,
|
||||
realtime: Object,
|
||||
importdata: Object
|
||||
})
|
||||
|
||||
const { $copy, $find, $findapi, $getapi, $setpage, $clone, $stripHtml, $snackbar, $dayjs } = useNuxtApp()
|
||||
|
||||
const showmodal = ref()
|
||||
const pagedata = ref()
|
||||
const newDataAvailable = ref(false)
|
||||
const pendingNewData = ref(null)
|
||||
const lastDataHash = ref(null)
|
||||
const pollingInterval = ref(null)
|
||||
|
||||
let vpagename = props.pagename
|
||||
let vfilter = props.filter ? $copy(props.filter) : undefined
|
||||
let vparams = props.params ? $copy(props.params) : undefined
|
||||
let connection = undefined
|
||||
let optfilter = props.filter || (props.params ? props.params.filter : undefined)
|
||||
|
||||
const realtimeConfig = ref({ time: 0, update: "true" })
|
||||
|
||||
if (props.realtime) {
|
||||
realtimeConfig.value = { time: props.realtime.time || 0, update: props.realtime.update }
|
||||
}
|
||||
|
||||
if (vparams?.filter) {
|
||||
for (const [key, value] of Object.entries(vparams.filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
vparams.filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const generateDataHash = (data) => {
|
||||
if (!data) return null
|
||||
try {
|
||||
// Use a replacer with JSON.stringify to create a stable string representation
|
||||
// by sorting the keys of any object. This ensures the hash is consistent
|
||||
// even if the API returns objects with keys in a different order.
|
||||
const replacer = (key, value) =>
|
||||
value && typeof value === 'object' && !Array.isArray(value)
|
||||
? Object.keys(value)
|
||||
.sort()
|
||||
.reduce((sorted, key) => {
|
||||
sorted[key] = value[key];
|
||||
return sorted;
|
||||
}, {})
|
||||
: value;
|
||||
|
||||
const stringToHash = JSON.stringify(data, replacer);
|
||||
|
||||
return stringToHash.split('').reduce((a, b) => {
|
||||
a = ((a << 5) - a) + b.charCodeAt(0)
|
||||
return a & a
|
||||
}, 0)
|
||||
} catch (e) {
|
||||
console.error('Error generating data hash:', e);
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const startAutoCheck = () => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value)
|
||||
if (realtimeConfig.value.time && realtimeConfig.value.time > 0) {
|
||||
pollingInterval.value = setInterval(() => checkDataChanges(), realtimeConfig.value.time * 1000)
|
||||
}
|
||||
}
|
||||
|
||||
const checkDataChanges = async () => {
|
||||
try {
|
||||
const connlist = []
|
||||
const conn1 = $findapi(props.api)
|
||||
|
||||
if (vfilter) {
|
||||
const filter = $copy(conn1.params.filter) || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
|
||||
if (vparams) conn1.params = $copy(vparams)
|
||||
|
||||
delete conn1.params.sort
|
||||
delete conn1.params.values
|
||||
|
||||
conn1.params.summary = 'aggregate'
|
||||
conn1.params.distinct_values = JSON.stringify({
|
||||
total_count: { type: 'Count', field: 'id' },
|
||||
last_updated: { type: 'Max', field: 'update_time' },
|
||||
last_created: { type: 'Max', field: 'create_time' }
|
||||
})
|
||||
|
||||
connlist.push(conn1)
|
||||
|
||||
const rs = await $getapi(connlist)
|
||||
const obj = $find(rs, { name: props.api })
|
||||
const newMetadata = obj ? obj.data.rows : {}
|
||||
const newHash = generateDataHash(newMetadata)
|
||||
|
||||
if (lastDataHash.value === null) {
|
||||
lastDataHash.value = newHash
|
||||
return
|
||||
}
|
||||
|
||||
if (newHash !== lastDataHash.value) {
|
||||
lastDataHash.value = newHash
|
||||
|
||||
if (realtimeConfig.value.update === "true") {
|
||||
await loadFullDataAsync()
|
||||
emit('dataUpdated', { newData: store[vpagename].data, autoUpdate: true, hasChanges: true })
|
||||
} else {
|
||||
newDataAvailable.value = true
|
||||
emit('dataUpdated', { newData: null, autoUpdate: false, hasChanges: true })
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const loadFullDataAsync = async () => {
|
||||
try {
|
||||
const connlist = []
|
||||
const conn1 = $findapi(props.api)
|
||||
|
||||
if (vfilter) {
|
||||
const filter = $copy(conn1.params.filter) || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
|
||||
if (vparams) conn1.params = $copy(vparams)
|
||||
|
||||
delete conn1.params.summary
|
||||
delete conn1.params.distinct_values
|
||||
|
||||
connlist.push(conn1)
|
||||
|
||||
const rs = await $getapi(connlist)
|
||||
const obj = $find(rs, { name: props.api })
|
||||
const newData = obj ? $copy(obj.data.rows) : []
|
||||
|
||||
updateDataDisplay(newData)
|
||||
} catch (error) {
|
||||
console.error('Error loading full data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const openImportModal = () => {
|
||||
const copy = $copy(props.importdata)
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const updateDataDisplay = (newData) => {
|
||||
const copy = $clone(store[vpagename])
|
||||
copy.data = newData
|
||||
copy.update = { data: newData }
|
||||
store.commit(vpagename, copy)
|
||||
newDataAvailable.value = false
|
||||
pendingNewData.value = null
|
||||
}
|
||||
|
||||
const manualRefresh = () => {
|
||||
if (pendingNewData.value) {
|
||||
updateDataDisplay(pendingNewData.value)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value);
|
||||
newDataAvailable.value = false;
|
||||
pendingNewData.value = null;
|
||||
|
||||
await getApi();
|
||||
|
||||
// After a manual refresh, force a metadata check to get the correct new hash.
|
||||
lastDataHash.value = null;
|
||||
await checkDataChanges();
|
||||
|
||||
newDataAvailable.value = false;
|
||||
startAutoCheck();
|
||||
}
|
||||
|
||||
watch(() => props.realtime, (newVal) => {
|
||||
if (newVal) {
|
||||
realtimeConfig.value.time = newVal.time || 0
|
||||
realtimeConfig.value.update = newVal.update === true
|
||||
startAutoCheck()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pollingInterval.value) clearInterval(pollingInterval.value)
|
||||
})
|
||||
|
||||
const timeOption = (v) => {
|
||||
if (!v) return getApi()
|
||||
|
||||
if (v.filter_or) {
|
||||
if (vfilter) vfilter = undefined
|
||||
if (vparams) {
|
||||
vparams.filter_or = v.filter_or
|
||||
} else {
|
||||
const found = $copy($findapi(props.api))
|
||||
found.params.filter_or = v.filter_or
|
||||
if (props.filter) {
|
||||
const filter = $copy(props.filter)
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
found.params.filter = filter
|
||||
}
|
||||
vparams = found.params
|
||||
}
|
||||
return getApi()
|
||||
}
|
||||
|
||||
let filter = vfilter ? vfilter : (props.params ? props.params.filter || {} : {})
|
||||
for (const [key, value] of Object.entries(v.filter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
|
||||
if (vfilter) {
|
||||
vfilter = filter
|
||||
vparams = undefined
|
||||
} else if (vparams) {
|
||||
vparams.filter = filter
|
||||
vparams.filter_or = undefined
|
||||
}
|
||||
|
||||
if (!vfilter && !vparams) vfilter = filter
|
||||
getApi()
|
||||
}
|
||||
|
||||
const edit = (v) => {
|
||||
const copy = props.modal ? $copy(props.modal) : {}
|
||||
const f = copy.vbind ? copy.vbind : { pagename: vpagename, api: props.api, row: v }
|
||||
f.pagename = vpagename
|
||||
f.row = v
|
||||
copy.vbind = f
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const insert = () => {
|
||||
const copy = props.modal ? $copy(props.modal) : {}
|
||||
const f = copy.vbind ? copy.vbind : { pagename: vpagename, api: props.api }
|
||||
f.pagename = vpagename
|
||||
copy.vbind = f
|
||||
showmodal.value = copy
|
||||
}
|
||||
|
||||
const getApi = async () => {
|
||||
const connlist = []
|
||||
let row = props.setting?.id ? $copy(props.setting) : undefined
|
||||
|
||||
if (!row) {
|
||||
const found = $find(store.settings.filter(v => v), props.setting > 0 ? { id: props.setting } : { name: props.setting })
|
||||
if (found) row = $copy(found)
|
||||
}
|
||||
|
||||
if (!row) {
|
||||
const conn = $findapi('usersetting')
|
||||
conn.params.filter = props.setting > 0 ? { id: props.setting } : { name: props.setting }
|
||||
connlist.push(conn)
|
||||
}
|
||||
|
||||
let data = props.data ? $copy(props.data) : undefined
|
||||
|
||||
if (!data) {
|
||||
const conn1 = $findapi(props.api)
|
||||
if (vfilter) {
|
||||
const filter = conn1.params.filter || {}
|
||||
for (const [key, value] of Object.entries(vfilter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf('$') >= 0) {
|
||||
filter[key] = store[value.replace('$', '')].id
|
||||
}
|
||||
}
|
||||
conn1.params.filter = filter
|
||||
}
|
||||
if (vparams) conn1.params = vparams
|
||||
connection = conn1
|
||||
connlist.push(conn1)
|
||||
}
|
||||
|
||||
let obj = undefined
|
||||
if (connlist.length > 0) {
|
||||
const rs = await $getapi(connlist)
|
||||
const ele = $find(rs, { name: 'usersetting' })
|
||||
if (ele) {
|
||||
row = $find(ele.data.rows, { name: props.setting.name || props.setting })
|
||||
const copy = $copy(store.settings)
|
||||
copy.push(row)
|
||||
store.commit('settings', copy)
|
||||
}
|
||||
obj = $find(rs, { name: props.api })
|
||||
if (obj) data = $copy(obj.data.rows)
|
||||
}
|
||||
|
||||
pagedata.value = $setpage(vpagename, row, obj)
|
||||
const copy = $clone(pagedata.value)
|
||||
copy.data = data
|
||||
copy.update = { data: data }
|
||||
store.commit(vpagename, copy)
|
||||
|
||||
// lastDataHash.value = generateDataHash(data); // This is now handled by checkDataChanges after a refresh.
|
||||
}
|
||||
|
||||
const dataEvent = (v, field, data) => {
|
||||
if (data?.modal) {
|
||||
const copy = $copy(data.modal)
|
||||
const f = copy.vbind ? copy.vbind : {}
|
||||
if (!f.api) f.api = props.api
|
||||
f.pagename = vpagename
|
||||
if (!f.row) f.row = v
|
||||
copy.vbind = f
|
||||
copy.field = field
|
||||
showmodal.value = copy
|
||||
}
|
||||
emit('modalevent', { name: 'dataevent', data: { row: v, field: field } })
|
||||
emit('dataevent', v, field)
|
||||
}
|
||||
|
||||
const exportExcel = async () => {
|
||||
if (!props.api) return
|
||||
|
||||
const found = $findapi('exportcsv')
|
||||
found.params = connection.params
|
||||
const fields = pagedata.value.fields
|
||||
.filter(v => (v.show && v.export !== 'no') || v.export === 'yes')
|
||||
.map(x => ({ name: x.name, label: $stripHtml(x.label) }))
|
||||
found.params.fields = JSON.stringify(fields)
|
||||
found.url = connection.url.replace('data/', 'exportcsv/')
|
||||
const rs = await $getapi([found])
|
||||
|
||||
if (rs === 'error') {
|
||||
$snackbar('Đã xảy ra lỗi. Vui lòng thử lại.')
|
||||
return
|
||||
}
|
||||
|
||||
const url = window.URL.createObjectURL(new Blob([rs[0].data]))
|
||||
const link = document.createElement('a')
|
||||
const fileName = `${$dayjs(new Date()).format('YYYYMMDDhhmmss')}-data.csv`
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
}
|
||||
|
||||
if (!props.timeopt) await getApi()
|
||||
startAutoCheck()
|
||||
</script>
|
||||
82
components/datatable/EditLabel.vue
Normal file
82
components/datatable/EditLabel.vue
Normal file
@@ -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>
|
||||
88
components/datatable/FieldAttribute.vue
Normal file
88
components/datatable/FieldAttribute.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="keys.length>0">
|
||||
<div class="field is-horizontal" v-for="(v,i) in keys" :key="i">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<div class="control">
|
||||
<input class="input fs-14" type="text" placeholder="" v-model="keys[i]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input fs-14" type="text" placeholder="" v-model="values[i]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-narrow">
|
||||
<p class="control">
|
||||
<a @click="addAttr()">
|
||||
<SvgIcon v-bind="{name: 'add1.png', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-2" @click="remove(i)">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-2" @click="jsonData(v, i)">
|
||||
<SvgIcon v-bind="{name: 'apps.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb-6" v-else>
|
||||
<button class="button is-primary has-text-white" @click="addAttr()">Thêm thuộc tính</button>
|
||||
</div>
|
||||
<div class="buttons mt-5">
|
||||
<a class="button is-primary has-text-white" @click="update()">Cập nhật</a>
|
||||
</div>
|
||||
<Modal @close="comp=undefined" @update="doUpdate"
|
||||
v-bind="{component: comp, width: '40%', height: '300px', vbind: vbind}" v-if="comp"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['field', 'close'],
|
||||
data() {
|
||||
return {
|
||||
keys: [],
|
||||
values: [],
|
||||
comp: undefined,
|
||||
vbind: undefined,
|
||||
current: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Object.keys(this.field).map(v=>{
|
||||
this.keys.push(v)
|
||||
this.values.push(this.field[v])
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
doUpdate(v) {
|
||||
this.values[this.current.i] = v
|
||||
},
|
||||
jsonData(v, i) {
|
||||
this.current = {v: v, i: i}
|
||||
this.vbind = {field: this.$empty(this.values[i]) || typeof this.values[i] === 'string'? {} : this.values[i], close: true}
|
||||
this.comp = 'datatable/FieldAttribute'
|
||||
},
|
||||
addAttr() {
|
||||
this.keys.push(undefined)
|
||||
this.values.push(undefined)
|
||||
},
|
||||
remove(i) {
|
||||
this.$remove(this.keys, i)
|
||||
this.$remove(this.values, i)
|
||||
},
|
||||
update() {
|
||||
let obj = {}
|
||||
this.keys.map((v,i)=>{
|
||||
if(!this.$empty(v)) obj[v] = v.indexOf('__in')>0? this.values[i].split(',') : this.values[i]
|
||||
})
|
||||
this.$emit('update', obj)
|
||||
this.$emit('modalevent', {name: 'update', data: obj})
|
||||
if(this.close) this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
170
components/datatable/FilterOption.vue
Normal file
170
components/datatable/FilterOption.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field mt-3 mb-1" v-if="field.format==='number'">
|
||||
<label class="label fs-14">Chọn trường<span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-taginput
|
||||
size="is-small"
|
||||
v-model="tagsField"
|
||||
:data="pageData? pageData.fields.filter(v=>v.format==='number') : []"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="name"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger has-text-weight-bold"> {{props.option.name}}</span>
|
||||
<span :class="tagsField.find(v=>v.id===props.option.id)? 'has-text-dark' : ''"> {{$stripHtml(props.option.label, 60)}} </span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tagsField')"> {{errors.find(v=>v.name==='tagsField').message}} </p>
|
||||
</div>
|
||||
<div class="mt-2" v-if="tagsField.length>0">
|
||||
<a @dblclick="expression = expression? (expression + ' ' + v.name) : v.name"
|
||||
class="tag is-rounded" v-for="(v,i) in tagsField" :key="i">
|
||||
<span class="tooltip">
|
||||
{{ v.name }}
|
||||
<span class="tooltiptext" style="top: 60%; bottom: unset; min-width: max-content; left: 25px;">{{ $stripHtml(v.label) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3">
|
||||
<div class="field-body">
|
||||
<div class="field" v-if="field.format==='number'">
|
||||
<label class="label fs-14">Biểu thức có dạng Đúng / Sai <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input is-small" type="text" v-model="expression">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='expression')"> {{errors.find(v=>v.name==='expression').message}} </p>
|
||||
</div>
|
||||
|
||||
<div class="field" v-else>
|
||||
<label class="label"> Chuỗi kí tự <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<p class="control">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="text"
|
||||
placeholder=""
|
||||
v-model="searchText"
|
||||
@change="changeStyle()"
|
||||
/>
|
||||
</p>
|
||||
<p
|
||||
class="help has-text-danger"
|
||||
v-if="errors.find((v) => v.name === 'searchText')"
|
||||
>
|
||||
{{ errors.find((v) => v.name === "searchText").msg }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-narrow" v-if="filterType==='color'">
|
||||
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" v-model="color" @change="changeStyle()">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='color')"> {{errors.find(v=>v.name==='color').message}} </p>
|
||||
</div>
|
||||
<div class="field is-narrow" v-else-if="filterType==='size'">
|
||||
<label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" placeholder="Nhập số" v-model="size" @change="changeStyle()">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='size')"> {{errors.find(v=>v.name==='size').message}} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['filterObj', 'filterType', 'pagename', 'field'],
|
||||
data() {
|
||||
return {
|
||||
tagsField: [],
|
||||
expression: undefined,
|
||||
form: undefined,
|
||||
color: undefined,
|
||||
size: undefined,
|
||||
errors: [],
|
||||
searchText: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.color = this.filterObj.color
|
||||
this.size = this.filterObj.size
|
||||
this.expression = this.filterObj.expression? this.filterObj.expression : this.field.name
|
||||
if(this.filterObj.tags) {
|
||||
this.filterObj.tags.map(v=>{
|
||||
this.tagsField.push(this.pageData.fields.find(x=>x.name===v))
|
||||
})
|
||||
} else if(this.field.format==='number') this.tagsField.push(this.pageData.fields.find(v=>v.name===this.field.name))
|
||||
},
|
||||
watch: {
|
||||
expression: function(newVal) {
|
||||
if(this.$empty(newVal)) return
|
||||
else this.changeStyle()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colorscheme: {
|
||||
get: function() {return this.$store.state.colorscheme},
|
||||
set: function(val) {this.$store.commit("updateColorScheme", {colorscheme: val})}
|
||||
},
|
||||
pageData: {
|
||||
get: function() {return this.$store.state[this.pagename]},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
|
||||
},
|
||||
colorchoice: {
|
||||
get: function() {return this.$store.state.colorchoice},
|
||||
set: function(val) {this.$store.commit("updateColorChoice", {colorchoice: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeStyle() {
|
||||
let check = this.field.format==='number'? this.checkExpression() : this.checkCondition()
|
||||
if(!check) return
|
||||
var row = this.field.format==='number'? {expression: this.expression, tags: this.tagsField.map(v=>v.name)}
|
||||
: {keyword: this.searchText, type: 'search'}
|
||||
this.filterType==='color'? row.color = this.color : row.size = this.size
|
||||
this.$emit('databack', row)
|
||||
},
|
||||
checkCondition() {
|
||||
this.errors = []
|
||||
if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
|
||||
if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
|
||||
if(this.$empty(this.searchText)) this.errors.push({name: 'searchText', message: 'Chưa nhập chuỗi kí tự'})
|
||||
return this.errors.length>0? false : true
|
||||
},
|
||||
checkExpression() {
|
||||
this.errors = []
|
||||
if(this.filterType==='color' && this.$empty(this.color)) this.errors.push({name: 'color', message: 'Chọn màu'})
|
||||
if(this.filterType==='size' && this.$empty(this.size)) this.errors.push({name: 'size', message: 'Nhập cỡ chữ'})
|
||||
let val = this.$copy(this.expression)
|
||||
let exp = this.$copy(this.expression)
|
||||
this.tagsField.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
exp = exp.replace(myRegExp, "field.formatNumber(row['" + v.name + "'])")
|
||||
})
|
||||
try {
|
||||
let value = this.$calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
} else if(!(eval(value)===true || eval(value)===false)) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
this.errors.push({name: 'expression', message: 'Biểu thức không hợp lệ'})
|
||||
}
|
||||
return this.errors.length>0? false : true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
207
components/datatable/FormatOption.vue
Normal file
207
components/datatable/FormatOption.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div v-if="['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<p class="has-text-right has-text-grey is-italic fs-13">
|
||||
Màu sắc sẽ hiển thị theo điều kiện Đúng / Sai, mã lệnh do hệ thống tự sinh
|
||||
</p>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li v-for="(v, i) in tabs" :key="i" :class="tab.code === v.code ? 'is-active' : ''" @click="tab = v">
|
||||
<a>{{ v.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="tab.code === 'expression' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<template v-if="radio ? radio.code === 'condition' && sideBar === 'bgcolor' : false">
|
||||
<div v-for="(v, i) in bgcolorFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'bgcolor', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(bgcolorFilter)" v-if="bgcolorFilter.length <= 30">
|
||||
Thêm
|
||||
</a>
|
||||
<a class="has-text-danger" @click="removeCondition(bgcolorFilter, i)" v-if="bgcolorFilter.length > 1">
|
||||
Bớt
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'color' : false">
|
||||
<div v-for="(v, i) in colorFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'color', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'color', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(colorFilter)" v-if="colorFilter.length <= 30"> Thêm </a>
|
||||
<a class="has-text-danger" @click="removeCondition(colorFilter, i)" v-if="colorFilter.length > 1"> Bớt </a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="radio ? radio.code === 'condition' && sideBar === 'textsize' : false">
|
||||
<div v-for="(v, i) in sizeFilter" :key="v.id" class="px-4">
|
||||
<FilterOption
|
||||
v-bind="{ filterObj: v, filterType: 'size', pagename: pagename, field: openField }"
|
||||
:ref="v.id"
|
||||
@databack="doConditionFilter($event, 'textsize', v.id)"
|
||||
/>
|
||||
<p class="fs-14 mt-1" :class="currentField.format === 'string' ? 'mb-1' : 'mb-2'">
|
||||
<a class="has-text-primary mr-5" @click="addCondition(sizeFilter)" v-if="sizeFilter.length <= 30"> Thêm </a>
|
||||
<a class="has-text-danger" @click="removeCondition(sizeFilter, i)" v-if="sizeFilter.length > 1"> Bớt </a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab.code === 'script' && ['bgcolor', 'color', 'textsize'].find((x) => x === sideBar)">
|
||||
<p class="my-4 mx-4">
|
||||
<a @click="copyContent(script ? script : '')" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
||||
<span class="fs-16">Copy</span>
|
||||
</span>
|
||||
</a>
|
||||
<a @click="paste()" class="mr-6">
|
||||
<span class="icon-text">
|
||||
<SvgIcon class="mr-2" v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"></SvgIcon>
|
||||
<span class="fs-16">Paste</span>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="mx-4">
|
||||
<textarea class="textarea fs-14" rows="8" v-model="script" @change="checkScript()" @dblclick="doCheck"></textarea>
|
||||
</div>
|
||||
<p class="mt-5 mx-4">
|
||||
<span class="icon-text fsb-18">
|
||||
Replace
|
||||
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<div class="field is-grouped mx-4 mt-4">
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Đoạn text</p>
|
||||
<input class="input" type="text" placeholder="" v-model="source" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<p class="fsb-14 mb-1">Thay bằng</p>
|
||||
<input class="input" type="text" placeholder="" v-model="target" />
|
||||
</div>
|
||||
<div class="control pl-5">
|
||||
<button class="button is-primary is-rounded is-outlined mt-5" @click="replace()">Replace</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-5 pt-2 mx-4">
|
||||
<span class="icon-text fsb-18">
|
||||
Thay đổi màu
|
||||
<SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="changeScript()">Cập nhật</button></p>
|
||||
</template>
|
||||
<TableOption v-bind="{ pagename: pagename }" v-else-if="sideBar === 'option'"> </TableOption>
|
||||
<CreateTemplate v-else-if="sideBar === 'template'" v-bind="{ pagename: pagename, field: openField }">
|
||||
</CreateTemplate>
|
||||
</template>
|
||||
<script setup>
|
||||
// FilterOption: () => import("@/components/datatable/FilterOption"),
|
||||
// TableOption: () => import("@/components/datatable/TableOption"),
|
||||
//CreateTemplate: () => import("@/components/datatable/CreateTemplate")
|
||||
import CreateTemplate from "~/components/datatable/CreateTemplate";
|
||||
const { $id, $copy, $empty, $stripHtml } = useNuxtApp();
|
||||
var props = defineProps({
|
||||
event: Object,
|
||||
currentField: Object,
|
||||
pagename: String,
|
||||
});
|
||||
var currentField = props.currentField;
|
||||
var event = props.event;
|
||||
var openField = {};
|
||||
var bgcolorFilter = [];
|
||||
var colorFilter = [];
|
||||
var sizeFilter = [];
|
||||
var sideBar = undefined;
|
||||
var script = undefined;
|
||||
var radio = undefined;
|
||||
var tabs = [
|
||||
{ code: "expression", name: "Biểu thức" },
|
||||
{ code: "script", name: "Mã lệnh" },
|
||||
];
|
||||
var tab = { code: "expression", name: "Biểu thức" };
|
||||
var source = undefined;
|
||||
var target = $copy(currentField.name);
|
||||
|
||||
const initData = function () {
|
||||
openField = event.field;
|
||||
sideBar = event.name;
|
||||
script = event.script;
|
||||
radio = event.radio;
|
||||
let field = event.field;
|
||||
bgcolorFilter = [{ id: $id() }];
|
||||
if (field.bgcolor) {
|
||||
if (Array.isArray(field.bgcolor)) bgcolorFilter = $copy(field.bgcolor);
|
||||
}
|
||||
colorFilter = [{ id: $id() }];
|
||||
if (field.color) {
|
||||
if (Array.isArray(field.color)) colorFilter = $copy(field.color);
|
||||
}
|
||||
sizeFilter = [{ id: $id() }];
|
||||
if (field.textsize) {
|
||||
if (Array.isArray(field.textsize)) sizeFilter = field.textsize;
|
||||
}
|
||||
};
|
||||
|
||||
const doCheck = function () {
|
||||
let text = window.getSelection().toString();
|
||||
if ($empty(text)) return;
|
||||
source = text;
|
||||
};
|
||||
const replace = function () {
|
||||
if ($empty(script)) return;
|
||||
script = script.replaceAll(source, target);
|
||||
};
|
||||
const paste = async function () {
|
||||
script = await navigator.clipboard.readText();
|
||||
};
|
||||
const addCondition = function (arr) {
|
||||
arr.push({ id: $id() });
|
||||
};
|
||||
const removeCondition = function (arr, i) {
|
||||
$delete(arr, i);
|
||||
};
|
||||
const copyContent = function (value) {
|
||||
$copyToClipboard(value);
|
||||
};
|
||||
const checkScript = function () {
|
||||
if ($empty(script)) return;
|
||||
try {
|
||||
JSON.parse(script);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
const changeScript = function () {
|
||||
if (!checkScript()) return;
|
||||
let copy = $copy(openField);
|
||||
copy[sideBar] = JSON.parse(script);
|
||||
$emit("modalevent", { name: "updatefields", data: copy });
|
||||
};
|
||||
const doConditionFilter = function (v, type, id) {
|
||||
v.id = id;
|
||||
let copy = $copy(currentField);
|
||||
if (copy[type] ? Array.isArray(copy[type]) : false) {
|
||||
let idx = copy[type].findIndex((x) => x.id === id);
|
||||
idx >= 0 ? (copy[type][idx] = v) : copy[type].push(v);
|
||||
} else copy[type] = [v];
|
||||
$emit("modalevent", { name: "updatefields", data: copy });
|
||||
};
|
||||
initData();
|
||||
console.log(sideBar);
|
||||
</script>
|
||||
161
components/datatable/MenuSave.vue
Normal file
161
components/datatable/MenuSave.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="mb-4" v-if="currentsetting ? currentsetting.user === login.id : false">
|
||||
<p class="fs-16 has-text-findata">
|
||||
Đang mở: <b>{{ $stripHtml(currentsetting.name, 40) }}</b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Chọn chế độ lưu <span class="has-text-danger"> * </span></label>
|
||||
<div class="control is-expanded fs-14">
|
||||
<a class="mr-5" v-if="isOverwrite()" @click="changeType('overwrite')">
|
||||
<span class="icon-text">
|
||||
<SvgIcon
|
||||
v-bind="{
|
||||
name: radioSave === 'overwrite' ? 'radio-checked.svg' : 'radio-unchecked.svg',
|
||||
type: 'gray',
|
||||
size: 22,
|
||||
}"
|
||||
></SvgIcon>
|
||||
Ghi đè
|
||||
</span>
|
||||
</a>
|
||||
<a @click="changeType('new')">
|
||||
<span class="icon-text">
|
||||
<SvgIcon
|
||||
v-bind="{ name: radioSave === 'new' ? 'radio-checked.svg' : 'radio-unchecked.svg', type: 'gray', size: 22 }"
|
||||
></SvgIcon>
|
||||
Tạo mới
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="radioSave === 'new'">
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14">Tên thiết lập <span class="has-text-danger"> * </span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="name" ref="name" v-on:keyup.enter="saveSetting" />
|
||||
</div>
|
||||
<div class="help has-text-danger" v-if="errors.find((v) => v.name === 'name')">
|
||||
{{ errors.find((v) => v.name === "name").msg }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14"> Mô tả </label>
|
||||
<p class="control is-expanded">
|
||||
<textarea class="textarea" rows="4" v-model="note"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<!--
|
||||
<div class="field mt-4 px-0 mx-0">
|
||||
<label class="label fs-14">Loại thiết lập <span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control is-expanded fs-14">
|
||||
<span class="mr-4" v-for="(v,i) in $filter(store.settingtype, {code: ['private', 'public']})">
|
||||
<a class="icon-text" @click="changeOption(v)">
|
||||
<SvgIcon v-bind="{name: `radio-${radioOption===v.code? '' : 'un'}checked.svg`, type: radioOption===v.code? 'primary' : 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
<div class="field mt-5 px-0 mx-0">
|
||||
<label class="label fs-14" v-if="status !== undefined" :class="status ? 'has-text-primary' : 'has-text-danger'">
|
||||
{{ status ? "Lưu thiết lập thành công." : "Lỗi. Lưu thiết lập thất bại." }}
|
||||
</label>
|
||||
<p class="control is-expanded">
|
||||
<a class="button is-primary has-text-white" @click="saveSetting()">Lưu lại</a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useStore } from "@/stores/index";
|
||||
const emit = defineEmits([]);
|
||||
const store = useStore();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
classify: String,
|
||||
option: String,
|
||||
data: Object,
|
||||
focus: Boolean,
|
||||
});
|
||||
const { $empty, $copy, $filter, $stripHtml, $updateapi, $insertapi, $findIndex, $snackbar } = useNuxtApp();
|
||||
var pagename = props.pagename;
|
||||
var radioOption = ref();
|
||||
var login = { id: 1 };
|
||||
var errors = [];
|
||||
var radioType = undefined;
|
||||
var radioDefault = 0;
|
||||
var radioSave = ref("new");
|
||||
var note = undefined;
|
||||
var status = undefined;
|
||||
var name = undefined;
|
||||
var currentsetting = undefined;
|
||||
var pagedata = store[props.pagename];
|
||||
async function saveSetting() {
|
||||
errors = [];
|
||||
let detail = pagename ? { fields: pagedata.fields } : {};
|
||||
if (pagename) {
|
||||
let element = pagedata.tablesetting || {};
|
||||
if (element !== store.originsetting) detail.tablesetting = element;
|
||||
if (pagedata.filters ? pagedata.filters.length > 0 : false) {
|
||||
detail.filters = pagedata.filters;
|
||||
}
|
||||
}
|
||||
if (props.option) detail.option = props.option;
|
||||
if (props.data) detail.data = props.data;
|
||||
let data = {
|
||||
user: login.id,
|
||||
name: name,
|
||||
detail: detail,
|
||||
note: note,
|
||||
type: radioType.id,
|
||||
classify: props.classify ? props.classify : store.settingclass.find((v) => v.code === "data-field").id,
|
||||
default: radioDefault,
|
||||
update_time: new Date(),
|
||||
};
|
||||
let result;
|
||||
if (radioSave.value === "new") {
|
||||
if ($empty(name)) {
|
||||
return errors.push({ name: "name", msg: "Tên thiết lập không được bỏ trống" });
|
||||
}
|
||||
result = await $insertapi("usersetting", data);
|
||||
} else {
|
||||
let copy = $copy(currentsetting);
|
||||
copy.detail = detail;
|
||||
copy.update_time = new Date();
|
||||
result = await $updateapi("usersetting", copy);
|
||||
}
|
||||
if (radioSave.value === "new") {
|
||||
emit("modalevent", { name: "opensetting", data: result });
|
||||
} else {
|
||||
let idx = $findIndex(store.settings, { id: result.id });
|
||||
if (idx >= 0) {
|
||||
let copy = $copy(store.settings);
|
||||
copy[idx] = result;
|
||||
store.commit("settings", copy);
|
||||
}
|
||||
$snackbar("Lưu thiết lập thành công");
|
||||
emit("modalevent", { name: "updatesetting", data: result });
|
||||
emit("close");
|
||||
}
|
||||
}
|
||||
function isOverwrite() {
|
||||
return true;
|
||||
}
|
||||
function changeType(value) {
|
||||
radioSave.value = value;
|
||||
}
|
||||
function changeOption(v) {
|
||||
radioOption.value = v.code;
|
||||
}
|
||||
function initData() {
|
||||
radioType = store.settingtype.find((v) => v.code === "private");
|
||||
if (props.pagename) currentsetting = $copy(pagedata.setting ? pagedata.setting : undefined);
|
||||
if (!currentsetting) radioSave.value = "new";
|
||||
else if (currentsetting.user !== login.id) radioSave.value = "new";
|
||||
else radioSave.value = "overwrite";
|
||||
}
|
||||
initData();
|
||||
</script>
|
||||
159
components/datatable/ModelInfo.vue
Normal file
159
components/datatable/ModelInfo.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li :class="`${v.code === tab ? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`" v-for="v in tabs">
|
||||
<a @click="changeTab(v)">{{ v.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="tab === 'datatype'">
|
||||
<Caption class="mb-3" v-bind="{ title: 'Kiểu dữ liệu (type)', type: 'has-text-warning' }"></Caption>
|
||||
<div class="py-1 border-bottom is-clickable" v-for="x in current.fields">
|
||||
{{ x.name }}
|
||||
<span class="ml-6 has-text-grey">{{ x.type }}</span>
|
||||
<a class="ml-6 has-text-primary" v-if="x.model" @click="openModel(x)">{{ x.model }}</a>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="columns mx-0 mb-0 pb-0">
|
||||
<div class="column is-7">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Values', type: 'has-text-warning' }"></Caption>
|
||||
<input class="input" rows="1" v-model="values" />
|
||||
</div>
|
||||
<div class="column is-4s">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Filter', type: 'has-text-warning' }"></Caption>
|
||||
<input class="input" rows="1" v-model="filter" />
|
||||
</div>
|
||||
<div class="column is-1">
|
||||
<Caption class="mb-2" v-bind="{ title: 'Load', type: 'has-text-warning' }"></Caption>
|
||||
<div>
|
||||
<button class="button is-primary has-text-white" @click="loadData()">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Caption class="mb-2" v-bind="{ title: 'Query', type: 'has-text-warning' }"></Caption>
|
||||
<div class="mb-4">
|
||||
{{ query }}
|
||||
<a class="has-text-primary ml-5" @click="copy()">copy</a>
|
||||
<p>
|
||||
{{ apiUrl }}
|
||||
<a class="has-text-primary ml-5" @click="$copyToClipboard(apiUrl)">copy</a>
|
||||
<a class="has-text-primary ml-5" target="_blank" :href="apiUrl">open</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Caption class="mb-2" v-bind="{ title: 'Data', type: 'has-text-warning' }"></Caption>
|
||||
<DataTable v-bind="{ pagename: pagename }" v-if="pagedata" />
|
||||
</div>
|
||||
</template>
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
var props = defineProps({
|
||||
data: Array,
|
||||
info: Object,
|
||||
});
|
||||
const { $getdata, $getapi, $createField, $clone, $getpage, $empty, $copyToClipboard, $find } = useNuxtApp();
|
||||
const store = useStore();
|
||||
var pagename = "pagedata99";
|
||||
var pagedata = ref();
|
||||
pagedata.value = $getpage();
|
||||
store.commit(pagename, pagedata);
|
||||
let list = ["LogEntry", "Permission", "ContentType", "Session", "Group"];
|
||||
var current = ref({ fields: [] });
|
||||
var tabs = [
|
||||
{ code: "datatype", name: "Kiểu dữ liệu" },
|
||||
{ code: "table", name: "Dữ liệu" },
|
||||
];
|
||||
var tab = ref("datatype");
|
||||
var datatable = ref();
|
||||
var query = ref();
|
||||
var values, filter;
|
||||
var apiUrl = ref();
|
||||
var showmodal = ref();
|
||||
var data = props.data;
|
||||
current.value = props.info;
|
||||
function changeMenu(v) {
|
||||
values = undefined;
|
||||
filter = undefined;
|
||||
current.value = v;
|
||||
if (tab.value === "table") loadData();
|
||||
}
|
||||
async function changeTab(v) {
|
||||
tab.value = v.code;
|
||||
if (v.code === "table") loadData();
|
||||
}
|
||||
async function loadData() {
|
||||
let vfilter = filter ? filter.trim() : undefined;
|
||||
if (vfilter) {
|
||||
try {
|
||||
vfilter = JSON.parse(vfilter);
|
||||
} catch (error) {
|
||||
alert("Cấu trúc filter có lỗi");
|
||||
vfilter = undefined;
|
||||
}
|
||||
}
|
||||
let params = { values: values ? values.trim() : undefined, filter: filter };
|
||||
let modelName = current.value.model;
|
||||
let found = {
|
||||
name: modelName.toLowerCase().replace("_", ""),
|
||||
url: `data/${modelName}/`,
|
||||
url_detail: `data-detail/${modelName}/`,
|
||||
params: params,
|
||||
};
|
||||
query.value = $clone(found);
|
||||
let rs = await $getapi([found]);
|
||||
if (rs === "error") return alert("Đã xảy ra lỗi, hãy xem lại câu lệnh.");
|
||||
datatable.value = rs[0].data.rows;
|
||||
showData();
|
||||
|
||||
// api query
|
||||
const baseUrl = "https://api.y99.vn/" + `${query.value.url}`;
|
||||
apiUrl.value = baseUrl;
|
||||
let vparams = !$empty(values) ? { values: values } : null;
|
||||
if (!$empty(filter)) {
|
||||
vparams = vparams ? { values: values, filter: filter } : { filter: filter };
|
||||
}
|
||||
if (vparams) {
|
||||
let url = new URL(baseUrl);
|
||||
let searchParams = new URLSearchParams(vparams);
|
||||
url.search = searchParams.toString();
|
||||
apiUrl.value = baseUrl + url.search;
|
||||
}
|
||||
}
|
||||
function showData() {
|
||||
let arr = [];
|
||||
if (!$empty(values)) {
|
||||
let arr1 = values.trim().split(",");
|
||||
arr1.map((v) => {
|
||||
let val = v.trim();
|
||||
let field = $createField(val, val, "string", true);
|
||||
arr.push(field);
|
||||
});
|
||||
} else {
|
||||
current.value.fields.map((v) => {
|
||||
let field = $createField(v.name, v.name, "string", true);
|
||||
arr.push(field);
|
||||
});
|
||||
}
|
||||
let clone = $clone(pagedata.value);
|
||||
clone.fields = arr;
|
||||
clone.data = datatable.value;
|
||||
pagedata.value = undefined;
|
||||
setTimeout(() => (pagedata.value = clone));
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(query.value));
|
||||
}
|
||||
function openModel(x) {
|
||||
showmodal.value = {
|
||||
component: "datatable/ModelInfo",
|
||||
title: x.model,
|
||||
width: "70%",
|
||||
height: "600px",
|
||||
vbind: { data: data, info: $find(data, { model: x.model }) },
|
||||
};
|
||||
}
|
||||
</script>
|
||||
s
|
||||
334
components/datatable/NewField.vue
Normal file
334
components/datatable/NewField.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li :class="selectType.code===v.code? 'is-active fs-16' : 'fs-16'" v-for="v in fieldType">
|
||||
<a @click="selectType = v"><span>{{ v.name }}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template v-if="selectType.code==='formula'">
|
||||
<b-radio :class="i===1? 'ml-5' : null" v-model="choice" v-for="(v,i) in choices" :key="i"
|
||||
:native-value="v.code">
|
||||
<span :class="v.code===choice? 'fsb-16' : 'fs-16'">{{v.name}}</span>
|
||||
</b-radio>
|
||||
<div class="has-background-light mt-3 px-3 py-3">
|
||||
<div class="tags are-medium mb-0" v-if="choice==='function'">
|
||||
<span :class="`tag ${func===v.code? 'is-primary' : 'is-dark'} is-rounded is-clickable`"
|
||||
v-for="(v,i) in funcs" :key="i" @click="changeFunc(v)" @dblclick="addFunc(v)">{{v.name}}</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="field px-0 mx-0">
|
||||
<label class="label fs-14">Chọn trường<span class="has-text-danger"> *</span> </label>
|
||||
<div class="control">
|
||||
<!--<b-taginput
|
||||
size="is-small"
|
||||
v-model="tags"
|
||||
:data="fields.filter(v=>v.format==='number')"
|
||||
type="is-dark is-light"
|
||||
autocomplete
|
||||
:open-on-focus="true"
|
||||
field="caption"
|
||||
icon="plus"
|
||||
placeholder="Chọn trường"
|
||||
>
|
||||
<template slot-scope="props">
|
||||
<span class="mr-3 has-text-danger">{{props.option.name}}</span>
|
||||
<span :class="tags.find(v=>v.id===props.option.id)? 'has-text-dark' : ''">{{$stripHtml(props.option.label,50)}}</span>
|
||||
</template>
|
||||
<template slot="empty">
|
||||
Không có trường thỏa mãn
|
||||
</template>
|
||||
</b-taginput>-->
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tags')"> {{errors.find(v=>v.name==='tags').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-3" v-if="tags.length>0">
|
||||
<p class="help is-primary mb-1">Click đúp vào để thêm vào công thức tính.</p>
|
||||
<div class="tags mb-2">
|
||||
<span @dblclick="formula = formula? (formula + ' ' + v.name) : v.name" class="tag is-dark is-rounded is-clickable"
|
||||
v-for="v in tags">
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span v-for="(v,i) in operator" :key="i">
|
||||
<span @dblclick="addOperator(v)" class="tag is-primary is-rounded is-clickable mr-4">
|
||||
<span class="fs-16">{{v.code}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field mt-3 px-0 mx-0">
|
||||
<label class="label fs-14">Công thức tính <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<textarea class="textarea" rows="3" type="text" :placeholder="placeholder" v-model="formula"> </textarea>
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='formula')"> {{errors.find(v=>v.name==='formula').message}} </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-3 px-0 mx-0">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14">Hiển thị theo <span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<b-autocomplete
|
||||
size="is-small"
|
||||
icon-right="magnify"
|
||||
:value="selectUnit? selectUnit.name : ''"
|
||||
placeholder=""
|
||||
:keep-first=true
|
||||
:open-on-focus=true
|
||||
:data="moneyunit"
|
||||
field="name"
|
||||
@select="option => selectUnit = option">
|
||||
</b-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14">Phần thập phân</label>
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="" v-model="decimal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field px-0 mx-0">
|
||||
<label class="label">Tên trường <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Tên trường phải là duy nhất" v-model="name"
|
||||
:readonly="selectType? selectType.code==='formula': false">
|
||||
</p>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='name')"> {{errors.find(v=>v.name==='name').message}} </p>
|
||||
<p class="help has-text-primary" v-else> Tên trường do hệ thống tự sinh.</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<label class="label">Mô tả<span class="has-text-danger"> *</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded" >
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="label"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editLabel()">
|
||||
<span><SvgIcon v-bind="{name: 'pen.svg', type: 'dark', size: 17}"></SvgIcon></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='label')"> {{errors.find(v=>v.name==='label').message}} </p>
|
||||
</div>
|
||||
<div class="field mt-5" v-if="selectType.code==='empty'">
|
||||
<label class="label"
|
||||
>Kiểu dữ liệu
|
||||
<span class="has-text-danger"> * </span>
|
||||
</label>
|
||||
<div class="control fs-14">
|
||||
<span class="mr-4" v-for="(v,i) in datatype">
|
||||
<a class="icon-text" @click="changeType(v)">
|
||||
<SvgIcon v-bind="{name: `radio-${radioType.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
{{v.name}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<p class="control">
|
||||
<a class="button is-primary has-text-white"
|
||||
@click="selectType.code==='formula'? createField() : createEmptyField()">Tạo cột</a>
|
||||
</p>
|
||||
</div>
|
||||
<Modal v-bind="showmodal" v-if="showmodal" @label="changeLabel" @close="close"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
import ScrollBox from '~/components/datatable/ScrollBox'
|
||||
const emit = defineEmits(['modalevent'])
|
||||
const store = useStore()
|
||||
const { $id, $copy, $clone, $empty, $stripHtml, $createField, $calc, $isNumber } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
field: Object,
|
||||
filters: Object,
|
||||
filterData: Object,
|
||||
width: String
|
||||
})
|
||||
const moneyunit = store.moneyunit
|
||||
const datatype = store.datatype
|
||||
var showmodal = ref()
|
||||
var pagedata = store[props.pagename]
|
||||
var selectUnit = moneyunit.find(v=>v.code==='one')
|
||||
var data = []
|
||||
var current = 1
|
||||
var filterData = []
|
||||
var loading = false
|
||||
var fieldType = [{code: 'formula', name: 'Tạo công thức'}, {code: 'empty', name: 'Tạo cột rỗng'}]
|
||||
var errors = []
|
||||
var tags = []
|
||||
var formula = undefined
|
||||
var name = `f${$id().toLocaleLowerCase()}`
|
||||
var label = undefined
|
||||
var errors = []
|
||||
var selectType = fieldType.find(v=>v.code==='empty')
|
||||
var radioType = ref(datatype.find(v=>v.code==='string'))
|
||||
var fields = []
|
||||
var options = undefined
|
||||
var columns = $copy(pagedata.fields.filter(v=>v.format==='number'))
|
||||
var decimal = undefined
|
||||
var choices = [{code: 'column', name: 'Dùng cột dữ liệu'}, {code: 'function', name: 'Dùng hàm số'}]
|
||||
var choice = 'column'
|
||||
var funcs = [{code: 'sum', name: 'Sum'}, {code: 'max', name: 'Max'}, {code: 'min', name: 'Min'}, {code: 'avg', name: 'Avg'}]
|
||||
var func = 'sum'
|
||||
var placeholder = 'Minh hoạ công thức: f10001 + f10002'
|
||||
var args = undefined
|
||||
var operator = [{code: '+', name: 'Cộng'}, {code: '-', name: 'Trừ'}, {code: '*', name: 'Nhân'}, {code: '/', name: 'Chia'}, {code: '>', name: 'Lớn hơn'},
|
||||
{code: '>=', name: 'Lớn hơn hoặc bằng'}, {code: '<', name: 'Nhỏ hơn'}, {code: '<=', name: 'Nhỏ hơn hoặc bằng'}, {code: '==', name: 'Bằng'},
|
||||
{code: '&&', name: 'Và'}, {code: '||', name: 'Hoặc'}, {code: 'iif', name: 'Điều kiện rẽ nhánh'}]
|
||||
function editLabel() {
|
||||
if($empty(label)) return
|
||||
showmodal.value = {component: 'datatable/EditLabel', width: '500px', height: '300px', vbind: {label: label}}
|
||||
}
|
||||
function close() {
|
||||
showmodal.value = null
|
||||
}
|
||||
function changeLabel(evt) {
|
||||
label = evt
|
||||
showmodal.value = null
|
||||
}
|
||||
function changeType(v) {
|
||||
radioType.value = v
|
||||
}
|
||||
function addFunc(v) {
|
||||
formula = (formula? formula + ' ' : '') + v.name + '(C0: C2)'
|
||||
}
|
||||
function addOperator(v) {
|
||||
let text = v.code==='iif'? 'a>b? c : d' : v.code
|
||||
formula = `${formula || ''} ${text}`
|
||||
}
|
||||
function changeFunc(v) {
|
||||
placeholder = `${v.name}(C0:C2) hoặc ${v.name}(C0,C1,C2). C là viết tắt của cột dữ liệu, số thứ tự của cột bắt đầu từ 0`
|
||||
func = v.code
|
||||
}
|
||||
function getFields() {
|
||||
fields = pagedata? $copy(pagedata.fields) : []
|
||||
fields.map(v=>v.caption = (v.label? v.label.indexOf('<')>=0 : false)? v.name : v.label)
|
||||
}
|
||||
function checkFunc() {
|
||||
let error = false
|
||||
let val = formula.trim().replaceAll(' ', '')
|
||||
if(val.toLowerCase().indexOf(func)<0) error = true
|
||||
let start = val.toLowerCase().indexOf('(')
|
||||
let end = val.toLowerCase().indexOf(')')
|
||||
if( start<0 || end<0) error = true
|
||||
let content = val.substring(start+1, end)
|
||||
if($empty(content)) error = true
|
||||
let content1 = content.replaceAll(':', ',')
|
||||
let arr = content1.split(',')
|
||||
arr.map(v=>{
|
||||
let arr1 = v.toLowerCase().split('c')
|
||||
if(arr1.length!==2) error = true
|
||||
else if(!$isNumber(arr1[1])) error = true
|
||||
})
|
||||
return error? 'error' : content
|
||||
}
|
||||
function checkValid() {
|
||||
errors = []
|
||||
if(tags.length===0 && choice==='column') {
|
||||
errors.push({name: 'tags', message: 'Chưa chọn trường xây dựng công thức.'})
|
||||
}
|
||||
if(!$empty(formula)? $empty(formula.trim()) : true) {
|
||||
errors.push({name: 'formula', message: 'Công thức không được bỏ trống.'})
|
||||
}
|
||||
if(!$empty(label)? $empty(label.trim()) : true )
|
||||
errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.label.toLowerCase()===label.toLowerCase())) {
|
||||
errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
||||
}
|
||||
if(errors.length>0) return false
|
||||
//check formula in case use column
|
||||
if(choice==='column') {
|
||||
let val = $copy(formula)
|
||||
tags.forEach(v => {
|
||||
let myRegExp = new RegExp(v.name, 'g')
|
||||
val = val.replace(myRegExp, Math.random())
|
||||
})
|
||||
try {
|
||||
let value = $calc(val)
|
||||
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
||||
errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err)
|
||||
errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
||||
}
|
||||
} else {
|
||||
if(checkFunc()==='error') errors.push({name: 'formula', message: `Hàm ${func.toUpperCase()} không hợp lệ`})
|
||||
}
|
||||
return errors.length>0? false : true
|
||||
}
|
||||
function createField() {
|
||||
if(!checkValid()) return
|
||||
let field = $createField(name.trim(), label.trim(), 'number', true)
|
||||
field.formula = formula.trim().replaceAll(' ', '')
|
||||
if(choice==='function') {
|
||||
field.func = func
|
||||
field.vals = checkFunc()
|
||||
} else field.tags = tags.map(v=>v.name)
|
||||
field.level = Math.max(...pagedata.fields.map(v=>v.level? v.level : 0)) + 1
|
||||
field.unit = selectUnit.detail
|
||||
field.decimal = decimal
|
||||
field.disable = 'search,value'
|
||||
let copy = $copy(pagedata)
|
||||
copy.fields.push(field)
|
||||
store.commit(props.pagename, copy)
|
||||
emit('newfield', field)
|
||||
tags = []
|
||||
formula = undefined
|
||||
label = undefined
|
||||
name = `f${$id()}`
|
||||
emit('close')
|
||||
}
|
||||
function createEmptyField() {
|
||||
errors = []
|
||||
if(!$empty(name)? $empty(name.trim()) : true )
|
||||
errors.push({name: 'name', message: 'Tên không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.name.toLowerCase()===name.toLowerCase())) {
|
||||
errors.push({name: 'name', message: 'Tên trường bị trùng. Hãy đặt tên khác.'})
|
||||
}
|
||||
if(!$empty(label)? $empty(label.trim()) : true )
|
||||
errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
||||
else if(pagedata.fields.find(v=>v.label.toLowerCase()===label.toLowerCase())) {
|
||||
errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
||||
}
|
||||
if(errors.length>0) return
|
||||
let field = $createField(name.trim(), label.trim(), radioType.value.code, true)
|
||||
if(selectType.code==='chart') field = createChartField()
|
||||
let copy = $clone(pagedata)
|
||||
copy.fields.push(field)
|
||||
copy.update = {fields: copy.fields}
|
||||
store.commit(props.pagename, copy)
|
||||
//pagedata = copy
|
||||
emit('newfield', field)
|
||||
label = undefined
|
||||
name = `f${$id()}`
|
||||
emit('close')
|
||||
}
|
||||
function createChartField() {
|
||||
let array = pagedata.fields.filter(v=>v.format==='number' && v.show)
|
||||
if(args) array = $copy(args)
|
||||
let text = ''
|
||||
array.map((v,i)=>text += `'${v.name}${i<array.length-1? "'," : "'"}`)
|
||||
let label = ''
|
||||
array.map((v,i)=>label += `'${$stripHtml(v.label)}${i<array.length-1? "'," : "'"}`)
|
||||
let field = $createField(name.trim(), label.trim(), radioType.value.code, true)
|
||||
field.chart = 'yes'
|
||||
field.template = `<TrendingChart class="is-clickable" v-bind="{row: row, fields: [${text}], labels: [${label}], width: '80', height: '26', 'header': ['stock_code', 'name']}"/>`
|
||||
return field
|
||||
}
|
||||
//============
|
||||
getFields()
|
||||
</script>
|
||||
64
components/datatable/Pagination.vue
Normal file
64
components/datatable/Pagination.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<nav class="pagination mx-0" role="navigation" aria-label="pagination">
|
||||
<ul class="pagination-list" v-if="pageInfo">
|
||||
<li v-for="v in pageInfo">
|
||||
<a v-if="currentPage===v" class="pagination-link is-current has-background-primary has-text-white" :aria-label="`Page ${v}`" aria-current="page">{{ v }}</a>
|
||||
<a v-else href="#" class="pagination-link" :aria-label="`Goto page ${v}`" @click="changePage(v)">{{ v }}</a>
|
||||
</li>
|
||||
<a @click="previous()" class="pagination-previous ml-5">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'dark', size: 20, alt: 'Tìm kiếm'}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="next()" class="pagination-next">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 20, alt: 'Tìm kiếm'}"></SvgIcon>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(['changepage'])
|
||||
var props = defineProps({
|
||||
data: Array,
|
||||
perPage: Number
|
||||
})
|
||||
var currentPage = 1
|
||||
var totalRows = props.data.length
|
||||
var lastPage = parseInt(totalRows / props.perPage)
|
||||
if(lastPage*props.perPage<totalRows) lastPage += 1
|
||||
var pageInfo = ref()
|
||||
function pages(current_page, last_page, onSides = 2) {
|
||||
// pages
|
||||
let pages = [];
|
||||
// Loop through
|
||||
for (let i = 1; i <= last_page; i++) {
|
||||
// Define offset
|
||||
let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
|
||||
// If added
|
||||
if (i == 1 || (current_page - offset <= i && current_page + offset >= i) ||
|
||||
i == current_page || i == last_page) {
|
||||
pages.push(i);
|
||||
} else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
|
||||
pages.push('...');
|
||||
}
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
function changePage(page) {
|
||||
if(page==='...') return
|
||||
currentPage = page
|
||||
pageInfo.value = pages(page, lastPage, 2)
|
||||
emit('changepage', page)
|
||||
}
|
||||
pageInfo.value = pages(1, lastPage, 2)
|
||||
watch(() => props.data, (newVal, oldVal) => {
|
||||
totalRows = props.data.length
|
||||
lastPage = parseInt(totalRows / props.perPage)
|
||||
if(lastPage*props.perPage<totalRows) lastPage += 1
|
||||
pageInfo.value = pages(1, lastPage, 2)
|
||||
})
|
||||
function previous() {
|
||||
if(currentPage>1) changePage(currentPage-1)
|
||||
}
|
||||
function next() {
|
||||
if(currentPage<lastPage) changePage(currentPage+1)
|
||||
}
|
||||
</script>
|
||||
111
components/datatable/ScrollBox.vue
Normal file
111
components/datatable/ScrollBox.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<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>
|
||||
99
components/datatable/TableOption.vue
Normal file
99
components/datatable/TableOption.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="fs-14">
|
||||
<th>#</th>
|
||||
<th>Tên trường</th>
|
||||
<th>Tên cột</th>
|
||||
<th>...</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="fs-14" v-for="(v, i) in fields">
|
||||
<td>{{ i }}</td>
|
||||
<td>
|
||||
<a class="has-text-primary" @click="openField(v, i)">{{ v.name }}</a>
|
||||
</td>
|
||||
<td>{{ $stripHtml(v.label, 50) }}</td>
|
||||
<td>
|
||||
<a class="mr-4" @click="moveDown(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'down1.png', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-4" @click="moveUp(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'up.png', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
<a @click="askConfirm(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Modal @close="showmodal = undefined" @update="update" @confirm="remove" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "@/stores/index";
|
||||
const emit = defineEmits(["close"]);
|
||||
const { $stripHtml, $clone, $arrayMove, $remove } = useNuxtApp();
|
||||
const store = useStore();
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
});
|
||||
var showmodal = ref();
|
||||
var current;
|
||||
var pagedata = store[props.pagename];
|
||||
var fields = ref(pagedata.fields);
|
||||
function openField(v, i) {
|
||||
current = { v: v, i: i };
|
||||
showmodal.value = {
|
||||
component: "datatable/FieldAttribute",
|
||||
title: `${v.name} / ${$stripHtml(v.label)}`,
|
||||
width: "50%",
|
||||
height: "400px",
|
||||
vbind: { field: v },
|
||||
};
|
||||
}
|
||||
function update(data) {
|
||||
fields.value[current.i] = data;
|
||||
let copy = $clone(pagedata);
|
||||
copy.fields = fields.value;
|
||||
copy.update = { fields: fields.value };
|
||||
store.commit(props.pagename, copy);
|
||||
showmodal.value = undefined;
|
||||
emit("close");
|
||||
}
|
||||
function updateField() {
|
||||
let copy = $clone(pagedata);
|
||||
copy.fields = fields.value;
|
||||
copy.update = { fields: fields.value };
|
||||
store.commit(props.pagename, copy);
|
||||
}
|
||||
function moveDown(v, i) {
|
||||
let idx = i === fields.value.length - 1 ? 0 : i + 1;
|
||||
fields.value = $arrayMove(fields.value, i, idx);
|
||||
updateField();
|
||||
}
|
||||
function moveUp(v, i) {
|
||||
let idx = i === 0 ? fields.value.length - 1 : i - 1;
|
||||
fields.value = $arrayMove(fields.value, i, idx);
|
||||
updateField();
|
||||
}
|
||||
function askConfirm(v, i) {
|
||||
current = { v: v, i: i };
|
||||
showmodal.value = {
|
||||
component: `dialog/Confirm`,
|
||||
vbind: { content: "Bạn có muốn xóa cột này không?", duration: 10 },
|
||||
title: "Xóa cột",
|
||||
width: "500px",
|
||||
height: "100px",
|
||||
};
|
||||
}
|
||||
function remove() {
|
||||
let arr = [current.v];
|
||||
arr.map((v) => {
|
||||
let idx = fields.value.findIndex((x) => x.name === v.name);
|
||||
$remove(fields.value, idx);
|
||||
});
|
||||
updateField();
|
||||
}
|
||||
</script>
|
||||
112
components/datatable/TableSetting.vue
Normal file
112
components/datatable/TableSetting.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Cỡ chữ của bảng <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='table-font-size').detail"
|
||||
@change="changeSetting($event.target.value, 'table-font-size')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field" >
|
||||
<label class="label fs-14"> Cỡ chữ tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='header-font-size').detail"
|
||||
@change="changeSetting($event.target.value, 'header-font-size')">
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Số dòng trên 1 trang <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text" :value="tablesetting.find(v=>v.code==='per-page').detail"
|
||||
@change="changeSetting($event.target.value, 'per-page')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu nền bảng <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='table-background').detail"
|
||||
@change="changeSetting($event.target.value, 'table-background')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='table-font-color').detail"
|
||||
@change="changeSetting($event.target.value, 'table-font-color')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-font-color').detail"
|
||||
@change="changeSetting($event.target.value, 'header-font-color')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu nền tiêu đề <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-background').detail"
|
||||
@change="changeSetting($event.target.value, 'header-background')">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label fs-14"> Màu chữ khi filter<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input type="color" :value="tablesetting.find(v=>v.code==='header-filter-color').detail"
|
||||
@change="changeSetting($event.target.value, 'header-filter-color')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field" >
|
||||
<label class="label fs-14"> Đường viền <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control fs-14">
|
||||
<input class="input is-small" type="text"
|
||||
:value="tablesetting.find(v=>v.code==='td-border')? tablesetting.find(v=>v.code==='td-border').detail : undefined"
|
||||
@change="changeSetting($event.target.value, 'td-border')">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '@/stores/index'
|
||||
const store = useStore()
|
||||
var props = defineProps({
|
||||
pagename: String
|
||||
})
|
||||
const { $copy, $clone, $empty } = useNuxtApp()
|
||||
var pagedata = $clone(store[props.pagename])
|
||||
var errors = []
|
||||
var radioNote = 'no'
|
||||
var tablesetting = pagedata.tablesetting
|
||||
let found = tablesetting.find(v=>v.code==='note')
|
||||
if(found? found.detail!=='@' : false) radioNote = 'yes'
|
||||
function changeSetting(value, code) {
|
||||
if(code==='note' && $empty(value)) return
|
||||
let copy = $copy(tablesetting)
|
||||
let found = copy.find(v=>v.code===code)
|
||||
if(found) found.detail = value
|
||||
else {
|
||||
found = $copy(tablesetting.find(v=>v.code===code))
|
||||
found.detail = value
|
||||
copy.push(found)
|
||||
}
|
||||
tablesetting = copy
|
||||
pagedata.tablesetting = tablesetting
|
||||
store.commit(props.pagename, pagedata)
|
||||
}
|
||||
</script>
|
||||
378
components/datatable/TimeOption.vue
Normal file
378
components/datatable/TimeOption.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="pb-1" style="border-bottom: 2px solid #3c5b63" v-if="array || !enableTime">
|
||||
<div class="columns mx-0 mb-0">
|
||||
<div class="column is-8 px-0 pb-0" v-if="enableTime">
|
||||
<div class="field is-grouped is-grouped-multiline mb-0">
|
||||
<div class="control mb-0">
|
||||
<Caption v-bind="{ title: lang === 'vi' ? 'Thời gian' : 'Time', type: 'has-text-warning' }" />
|
||||
</div>
|
||||
<div class="control mb-0" v-for="v in array" :key="v.code">
|
||||
<span class="icon-text fsb-16 has-text-warning px-1" v-if="v.code === current">
|
||||
<SvgIcon v-bind="{ name: 'tick.png', size: 20 }"></SvgIcon>
|
||||
<span>{{ v.name }}</span>
|
||||
</span>
|
||||
<span class="icon-text has-text-grey hyperlink px-1 fsb-16" @click="changeOption(v)" v-else>{{
|
||||
v.name
|
||||
}}</span>
|
||||
</div>
|
||||
<span v-if="newDataAvailable" class="has-text-danger is-italic is-size-6 ml-2">Có dữ liệu mới, vui lòng làm
|
||||
mới.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4 px-0">
|
||||
<div class="field is-grouped is-grouped-multiline mb-0">
|
||||
<div class="control mb-0">
|
||||
<Caption v-bind="{
|
||||
type: 'has-text-warning',
|
||||
title: lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search',
|
||||
}" />
|
||||
</div>
|
||||
<div class="control mb-0">
|
||||
<input class="input is-small" type="text" v-model="text"
|
||||
:style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid #BEBEBE;`" @keyup="startSearch"
|
||||
id="input" :placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'" />
|
||||
</div>
|
||||
<div class="control mb-0">
|
||||
<span class="tooltip" v-if="importdata">
|
||||
<a class="mr-2" @click="openImport()">
|
||||
<SvgIcon v-bind="{
|
||||
name: 'upload.svg',
|
||||
type: 'findata',
|
||||
size: 22
|
||||
}"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">
|
||||
{{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="tooltip" v-if="enableAdd">
|
||||
<a class="mr-2" @click="$emit('add')">
|
||||
<SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Thêm mới" : "Add new"
|
||||
}}</span>
|
||||
</span>
|
||||
<span class="tooltip">
|
||||
<a class="mr-2" @click="$emit('excel')">
|
||||
<SvgIcon v-bind="{ name: 'excel.png', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Xuất excel" : "Export excel"
|
||||
}}</span>
|
||||
</span>
|
||||
|
||||
<span class="tooltip">
|
||||
<a @click="$emit('refresh-data')">
|
||||
<SvgIcon v-bind="{ name: 'refresh.svg', type: 'findata', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
<span class="tooltiptext" style="min-width: max-content">{{
|
||||
lang === "vi" ? "Làm mới" : "Refresh"
|
||||
}}</span>
|
||||
|
||||
</span>
|
||||
<a class="button is-primary is-loading is-small ml-3" v-if="loading"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useStore } from "@/stores/index"
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
|
||||
props: ["pagename", "api", "timeopt", "filter", "realtime", "newDataAvailable", "params", "importdata"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ code: 0, name: this.lang === "vi" ? "Hôm nay" : "Today" },
|
||||
{ code: 1, name: "1D" },
|
||||
{ code: 7, name: "7D" },
|
||||
{ code: 30, name: "1M" },
|
||||
{ code: 90, name: "3M" },
|
||||
{ code: 180, name: "6M" },
|
||||
{ code: 360, name: "1Y" },
|
||||
{ code: 36000, name: this.lang === "vi" ? "Tất cả" : "All" },
|
||||
],
|
||||
showmodal: undefined,
|
||||
current: 7,
|
||||
search: undefined,
|
||||
timer: undefined,
|
||||
text: undefined,
|
||||
status: [{ code: 100, name: "Chọn" }],
|
||||
array: undefined,
|
||||
enableAdd: true,
|
||||
enableTime: true,
|
||||
choices: [], // Sẽ được cập nhật động từ pagedata
|
||||
viewport: this.store.viewport,
|
||||
pagedata: undefined,
|
||||
loading: false,
|
||||
pollingInterval: null,
|
||||
searchableFields: [] // Lưu thông tin các field có thể tìm kiếm
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
pagename(newVal) {
|
||||
this.updateSearchableFields()
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
console.log("TimeOption created")
|
||||
|
||||
// Cập nhật searchable fields ngay từ đầu
|
||||
this.updateSearchableFields()
|
||||
|
||||
if (this.viewport < 5) {
|
||||
this.options = [
|
||||
{ code: 0, name: "Hôm nay" },
|
||||
{ code: 1, name: "1D" },
|
||||
{ code: 7, name: "7D" },
|
||||
{ code: 30, name: "1M" },
|
||||
{ code: 90, name: "3M" },
|
||||
{ code: 36000, name: "Tất cả" },
|
||||
]
|
||||
}
|
||||
|
||||
this.checkTimeopt()
|
||||
if (!this.enableTime) return this.$emit("option")
|
||||
|
||||
let found = this.$findapi(this.api)
|
||||
found.commit = undefined
|
||||
|
||||
let filter = this.$copy(this.filter)
|
||||
if (filter) {
|
||||
//dynamic parameter
|
||||
for (const [key, value] of Object.entries(filter)) {
|
||||
if (value.toString().indexOf("$") >= 0) {
|
||||
filter[key] = this.store[value.replace("$", "")].id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (found.params.filter) {
|
||||
if (!filter) filter = {}
|
||||
for (const [key, value] of Object.entries(found.params.filter)) {
|
||||
filter[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
this.options.map((v) => {
|
||||
let f = filter ? this.$copy(filter) : {}
|
||||
f["create_time__date__gte"] = this.$dayjs()
|
||||
.subtract(v.code, "day")
|
||||
.format("YYYY-MM-DD")
|
||||
v.filter = f
|
||||
})
|
||||
|
||||
this.$emit("option", this.$find(this.options, { code: this.current }))
|
||||
|
||||
let f = {}
|
||||
this.options.map((v) => {
|
||||
f[`${v.code}`] = {
|
||||
type: "Count",
|
||||
field: "create_time__date",
|
||||
filter: v.filter
|
||||
}
|
||||
})
|
||||
|
||||
let params = { summary: "aggregate", distinct_values: f }
|
||||
found.params = params
|
||||
|
||||
try {
|
||||
let rs = await this.$getapi([found])
|
||||
for (const [key, value] of Object.entries(rs[0].data.rows)) {
|
||||
let found = this.$find(this.options, { code: Number(key) })
|
||||
if (found) {
|
||||
found.name = `${found.name} (${value})`
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error)
|
||||
}
|
||||
|
||||
this.array = this.$copy(this.options)
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.realtime) {
|
||||
const interval = typeof this.realtime === "number" ? this.realtime * 1000 : 5000
|
||||
this.pollingInterval = setInterval(this.refresh, interval)
|
||||
}
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.pollingInterval) {
|
||||
clearInterval(this.pollingInterval)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
lang: function () {
|
||||
return this.store.lang
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Lấy các field có thể tìm kiếm từ API params.values
|
||||
updateSearchableFields() {
|
||||
try {
|
||||
// Lấy API config
|
||||
const found = this.$findapi(this.api)
|
||||
|
||||
if (!found) {
|
||||
console.warn('Không tìm thấy API config')
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
return
|
||||
}
|
||||
|
||||
// Ưu tiên lấy values từ props.params, nếu không có thì lấy từ API config
|
||||
let valuesString = ''
|
||||
|
||||
if (this.params && this.params.values) {
|
||||
// Lấy từ props.params (ưu tiên cao nhất)
|
||||
valuesString = this.params.values
|
||||
console.log('Using values from props.params')
|
||||
} else if (found.params && found.params.values) {
|
||||
// Lấy từ API config mặc định
|
||||
valuesString = found.params.values
|
||||
console.log('Using values from API default params')
|
||||
} else {
|
||||
console.warn('Không tìm thấy API values trong props hoặc config')
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
return
|
||||
}
|
||||
|
||||
// Parse values string từ API
|
||||
let fieldNames = valuesString.split(',').map(v => v.trim())
|
||||
|
||||
console.log('Raw fieldNames:', fieldNames)
|
||||
console.log('Total fields:', fieldNames.length)
|
||||
|
||||
// Lấy pagedata để lấy label
|
||||
this.pagedata = this.store[this.pagename]
|
||||
|
||||
// Lấy tất cả các field để search (không lọc format)
|
||||
const searchable = fieldNames.filter(fieldName => {
|
||||
// Loại bỏ các field kỹ thuật
|
||||
if (fieldName === 'id' ||
|
||||
fieldName === 'create_time' ||
|
||||
fieldName === 'update_time' ||
|
||||
fieldName === 'created_at' ||
|
||||
fieldName === 'updated_at') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
// Lấy tên và label các field
|
||||
this.choices = searchable
|
||||
this.searchableFields = searchable.map(fieldName => {
|
||||
// Lấy field base name (trước dấu __)
|
||||
const baseFieldName = fieldName.split('__')[0]
|
||||
const fieldInfo = this.pagedata && this.pagedata.fields
|
||||
? this.pagedata.fields.find(f => f.name === baseFieldName)
|
||||
: null
|
||||
|
||||
return {
|
||||
name: fieldName,
|
||||
label: fieldInfo ? fieldInfo.label : fieldName
|
||||
}
|
||||
})
|
||||
|
||||
console.log('Searchable fields:', this.searchableFields)
|
||||
console.log('Choices:', this.choices)
|
||||
console.log('Total searchable fields:', this.choices.length)
|
||||
} catch (error) {
|
||||
console.error('Error updating searchable fields:', error)
|
||||
this.choices = []
|
||||
this.searchableFields = []
|
||||
}
|
||||
},
|
||||
|
||||
refresh() {
|
||||
let found = this.$find(this.options, { code: this.current })
|
||||
this.changeOption(found)
|
||||
},
|
||||
|
||||
changeOption(v) {
|
||||
this.current = v.code
|
||||
if (this.search) {
|
||||
this.text = undefined
|
||||
this.search = undefined
|
||||
}
|
||||
this.$emit("option", this.$find(this.array, { code: this.current }))
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
// Cập nhật choices trước khi search
|
||||
this.updateSearchableFields()
|
||||
|
||||
this.pagedata = this.store[this.pagename]
|
||||
|
||||
if (!this.pagedata || !this.pagedata.fields) {
|
||||
console.warn('Không có pagedata hoặc fields')
|
||||
return
|
||||
}
|
||||
|
||||
let fields = this.pagedata.fields.filter(
|
||||
(v) => this.choices.findIndex((x) => x === v.name) >= 0
|
||||
)
|
||||
|
||||
if (fields.length === 0) {
|
||||
console.warn('Không tìm thấy field để tìm kiếm')
|
||||
return
|
||||
}
|
||||
|
||||
let f = {}
|
||||
fields.map((v) => {
|
||||
f[`${v.name}__icontains`] = this.search
|
||||
})
|
||||
|
||||
console.log('Search filter:', f)
|
||||
this.$emit("option", { filter_or: f })
|
||||
},
|
||||
|
||||
openImport() {
|
||||
if (!this.importdata) return
|
||||
// Emit event lên parent (DataView)
|
||||
this.$emit('import', this.importdata)
|
||||
},
|
||||
|
||||
startSearch(val) {
|
||||
this.search = this.$empty(val.target.value)
|
||||
? ""
|
||||
: val.target.value.trim()
|
||||
|
||||
if (this.timer) clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => this.doSearch(), 300)
|
||||
},
|
||||
|
||||
checkTimeopt() {
|
||||
if (this.timeopt > 0) {
|
||||
let obj = this.$find(this.options, { code: this.$formatNumber(this.timeopt) })
|
||||
if (obj) this.current = obj.code
|
||||
}
|
||||
if (this.timeopt ? this.$empty(this.timeopt.disable) : true) return
|
||||
if (this.timeopt.disable.indexOf("add") >= 0) this.enableAdd = false
|
||||
if (this.timeopt.disable.indexOf("time") >= 0) this.enableTime = false
|
||||
if (this.timeopt.time) {
|
||||
let obj = this.$find(this.options, { code: this.$formatNumber(this.timeopt.time) })
|
||||
if (obj) this.current = obj.code
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
10
components/datatable/format/ColorText.vue
Normal file
10
components/datatable/format/ColorText.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="{ color: color }">{{ text }}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
text: { type: String, required: true },
|
||||
color: { type: String, default: "#000" }
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatDate.vue
Normal file
10
components/datatable/format/FormatDate.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $dayjs(date).format('DD/MM/YYYY') }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $dayjs } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
date: String,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatNumber.vue
Normal file
10
components/datatable/format/FormatNumber.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $numtoString(value) }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $numtoString } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
value: Number,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
10
components/datatable/format/FormatTime.vue
Normal file
10
components/datatable/format/FormatTime.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<span :style="color? `color:${color}` : ''">{{ $numtoString(value) }}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $numtoString } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
value: Number,
|
||||
color: String
|
||||
})
|
||||
</script>
|
||||
130
components/datepicker/Datepicker.vue
Normal file
130
components/datepicker/Datepicker.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="control has-icons-left" :id="docid">
|
||||
<div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
|
||||
<div class="dropdown-trigger" style="width: 100%;">
|
||||
<input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text" placeholder="MM/DD/YYYY"
|
||||
maxlength="10" @focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="checkDate" v-model="show" />
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu" @click="doClick()">
|
||||
<div class="dropdown-content" style="min-width: 260px;">
|
||||
<PickDay class="py-2 px-2" v-bind="{date: date}" @date="selectDate"></PickDay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon is-left">
|
||||
<SvgIcon v-bind="{name: 'calendar.svg', type: 'gray', size: 21}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['record', 'attr', 'position', 'mindate', 'maxdate', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
date: undefined,
|
||||
show: undefined,
|
||||
error: false,
|
||||
focused: false,
|
||||
docid: this.$id(),
|
||||
count1: 0,
|
||||
count2: 0,
|
||||
pos: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPos()
|
||||
if(this.record) {
|
||||
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
record: function(newVal) {
|
||||
if(this.record) {
|
||||
this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
|
||||
if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pressEnter() {
|
||||
this.checkDate()
|
||||
if(!this.error) this.focused = false
|
||||
},
|
||||
setFocus() {
|
||||
this.focused = true
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
},
|
||||
lostFocus() {
|
||||
let self = this
|
||||
setTimeout(()=>{
|
||||
if(self.focused && self.count1===0) self.focused = false
|
||||
}, 200)
|
||||
},
|
||||
processEvent(event) {
|
||||
var doc = document.getElementById(this.docid)
|
||||
if(!doc) return
|
||||
this.count2 += 1
|
||||
var isClickInside = false
|
||||
isClickInside = doc.contains(event.target);
|
||||
if(!isClickInside && this.focused) {
|
||||
if(this.count2-1!==this.count1) {
|
||||
this.focused = false
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
doClick() {
|
||||
this.count1 += 1
|
||||
},
|
||||
selectDate(v) {
|
||||
this.date = v
|
||||
this.show = this.$dayjs(v).format('DD/MM/YYYY')
|
||||
this.$emit('date', this.date)
|
||||
if(this.focused) this.focused = false
|
||||
this.count1 = 0
|
||||
this.count2 = 0
|
||||
},
|
||||
getDate(value) {
|
||||
let v = value.replace(/\D/g,'').slice(0, 10);
|
||||
if (v.length >= 5) {
|
||||
return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
|
||||
}
|
||||
else if (v.length >= 3) {
|
||||
return `${v.slice(0,2)}/${v.slice(2)}`;
|
||||
}
|
||||
return v
|
||||
},
|
||||
checkDate() {
|
||||
if(!this.focused) this.setFocus()
|
||||
this.error = false
|
||||
this.date = undefined
|
||||
if(this.$empty(this.show)) return this.$emit('date', null)
|
||||
this.show = this.getDate(this.show)
|
||||
let val = `${this.show.substring(6,10)}-${this.show.substring(3,5)}-${this.show.substring(0,2)}`
|
||||
if(this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
|
||||
this.date = val
|
||||
this.$emit('date', this.date)
|
||||
} else this.error = true
|
||||
},
|
||||
getPos() {
|
||||
switch(this.position) {
|
||||
case 'is-top-left':
|
||||
this.pos = 'is-up is-left'
|
||||
break;
|
||||
case 'is-top-right':
|
||||
this.pos = 'is-up is-right'
|
||||
break;
|
||||
case 'is-bottom-left':
|
||||
this.pos = 'is-right'
|
||||
break;
|
||||
case 'is-bottom-right':
|
||||
this.pos = 'is-right'
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
185
components/datepicker/EventDetail.vue
Normal file
185
components/datepicker/EventDetail.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom" v-if="1<0">
|
||||
<div class="control pl-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 hyperlink mr-3" @click="type='months'" v-if="type==='days'">{{`Tháng ${month}`}}</span>
|
||||
<span class="fsb-16 hyperlink" @click="type='years'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div :class="`columns mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1 has-text-centered" v-for="(m,h) in v.dates" :key="h" style="min-height: 100px;"
|
||||
:style="`border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; ${(viewport>1 && h===0 || viewport===1)? 'border-left: 1px solid #DCDCDC;' : ''}
|
||||
${i===0? 'border-top: 1px solid #DCDCDC;' : ''}`">
|
||||
<p class="mb-1" v-if="i===0"><b>{{ $find(dateOfWeek, {id: h}).text}}</b></p>
|
||||
<span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
<div class="has-text-left fs-15 mt-1" v-if="m.event && m.currentMonth===m.mothCondition">
|
||||
<p :class="`pt-1 ${j===m.event.length-1? '' : 'border-bottom'}`" v-for="(h,j) in m.event">
|
||||
<SvgIcon v-bind="{name: h.icon, type: h.color, size: 16}"></SvgIcon>
|
||||
<a class="ml-3" @click="openEvent(h)">{{ h.text }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['date', 'events', 'mode', 'vyear', 'vmonth'],
|
||||
data() {
|
||||
return {
|
||||
dates: [],
|
||||
dateOfWeek: [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}],
|
||||
weeks: [],
|
||||
today: this.$dayjs().format('YYYY/MM/DD'),
|
||||
year: undefined,
|
||||
month: undefined,
|
||||
type: 'days',
|
||||
caption: undefined,
|
||||
action: undefined,
|
||||
curdate: undefined,
|
||||
showmodal: undefined,
|
||||
viewport: 5
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showDate()
|
||||
},
|
||||
watch: {
|
||||
date: function(newVal) {
|
||||
if(newVal) this.showDate()
|
||||
},
|
||||
vmonth: function(newVal) {
|
||||
this.showDate()
|
||||
},
|
||||
events: function(newVal) {
|
||||
this.showDate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async openEvent(event) {
|
||||
let row = await this.$getdata('sale', {id: event.sale}, undefined, true)
|
||||
this.showmodal = {title: 'Bán hàng', height: '500px', width: '90%', component: 'sale/Sale', vbind: {row: row, highlight: event.id}}
|
||||
},
|
||||
compiledComponent(value) {
|
||||
return {
|
||||
template: `${value}`
|
||||
}
|
||||
},
|
||||
showDate() {
|
||||
this.curdate = this.date? this.date.replaceAll('-', '/') : undefined
|
||||
this.year = this.$dayjs(this.curdate || this.today).year()
|
||||
this.month = this.$dayjs(this.curdate || this.today).month() + 1
|
||||
if(this.vyear) this.year = this.$copy(this.vyear)
|
||||
if(this.vmonth) this.month = this.$copy(this.vmonth)
|
||||
this.getDates()
|
||||
},
|
||||
chooseToday() {
|
||||
this.$emit('date', this.today.replaceAll('/', '-'))
|
||||
this.year = this.$dayjs(this.today).year()
|
||||
this.month = this.$dayjs(this.today).month() + 1
|
||||
this.getDates()
|
||||
},
|
||||
changeCaption(v) {
|
||||
this.caption = v
|
||||
},
|
||||
selectMonth(v) {
|
||||
this.month = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
selectYear(v) {
|
||||
this.year = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
getDates() {
|
||||
this.caption = undefined
|
||||
this.dates = this.allDaysInMonth(this.year, this.month)
|
||||
this.dates.map(v=>{
|
||||
let event = this.events? this.$filter(this.events, {isodate: v.date}) : undefined
|
||||
if(event.length>0) v.event = event
|
||||
})
|
||||
this.weeks = this.$unique(this.dates, ['week']).map(v=>{return {week: v.week}})
|
||||
this.weeks.map(v=>{
|
||||
v.dates = this.dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
},
|
||||
nextMonth() {
|
||||
let month = this.month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.year += 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
previousMonth() {
|
||||
let month = this.month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.year -= 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
nextYear() {
|
||||
if(this.type==='years') return this.action = {name: 'next', id: this.$id()}
|
||||
this.year += 1
|
||||
this.getDates()
|
||||
},
|
||||
previousYear() {
|
||||
if(this.type==='years') return this.action = {name: 'previous', id: this.$id()}
|
||||
this.year -= 1
|
||||
this.getDates()
|
||||
},
|
||||
choose(m) {
|
||||
this.$emit('date', m.date.replaceAll('/', '-'))
|
||||
},
|
||||
createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
},
|
||||
allDaysInMonth(year, month) {
|
||||
let days = Array.from({length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i)
|
||||
let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = this.$dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = this.$dayjs(date).day()
|
||||
let week = this.$dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
components/datepicker/EventMultiMonth.vue
Normal file
17
components/datepicker/EventMultiMonth.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline mx-0">
|
||||
<div class="column is-4" v-for="v in months">
|
||||
<EventSummary v-bind="{events: events, mode: 'simple', vyear: v.year, vmonth: v.month}"></EventSummary>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
EventSummary: () => import('@/components/datepicker/EventSummary')
|
||||
},
|
||||
props: ['events', 'months']
|
||||
}
|
||||
</script>
|
||||
52
components/datepicker/EventOneMonth.vue
Normal file
52
components/datepicker/EventOneMonth.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-narrow" v-if="1<0">
|
||||
<EventSummary></EventSummary>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="mb-4">
|
||||
<span class="fsb-17 mr-4">{{ `T${vmonth}/${vyear}` }}</span>
|
||||
<a class="mr-2" @click="previous()"><SvgIcon v-bind="{name: 'left1.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
<a class="mr-3" @click="next()"><SvgIcon v-bind="{name: 'right.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
<a @click="refresh()"><SvgIcon v-bind="{name: 'refresh.svg', type: 'dark', size: 18}"></SvgIcon></a>
|
||||
</div>
|
||||
<EventDetail v-bind="{events: events, vyear: vyear, vmonth: vmonth}"></EventDetail>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import EventSummary from '@/components/datepicker/EventSummary'
|
||||
import EventDetail from '@/components/datepicker/EventDetail'
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: ['events', 'year', 'month'],
|
||||
data() {
|
||||
return {
|
||||
vyear: this.year? this.$copy(this.year) : undefined,
|
||||
vmonth: this.month? this.$copy(this.month) : undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
let month = this.vmonth + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.vyear += 1
|
||||
}
|
||||
this.vmonth = month
|
||||
},
|
||||
previous() {
|
||||
let month = this.vmonth - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.vyear -= 1
|
||||
}
|
||||
this.vmonth = month
|
||||
},
|
||||
refresh() {
|
||||
this.$emit('refresh')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
192
components/datepicker/EventSummary.vue
Normal file
192
components/datepicker/EventSummary.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom">
|
||||
<div class="control pl-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 hyperlink mr-3" @click="mode==='simple'? false : type='PickMonth'" v-if="type==='days'">{{`Tháng ${month}`}}</span>
|
||||
<span class="fsb-16 hyperlink" @click="mode==='simple'? false : type='PickYear'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2" v-if="mode!=='simple'">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div class="columns is-mobile mx-0">
|
||||
<div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
|
||||
{{ m.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1 fs-14" v-for="(m,h) in v.dates" :key="h">
|
||||
<a v-if="m.event && m.currentMonth===m.mothCondition">
|
||||
<Tooltip v-bind="{html: m.event.html, tooltip: m.event.tooltip}"></Tooltip>
|
||||
</a>
|
||||
<span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="mode!=='simple'">
|
||||
<div class="border-bottom"></div>
|
||||
<div class="mt-2">
|
||||
<span class="ml-2 mr-2">Hôm nay: </span>
|
||||
<span class="has-text-primary hyperlink" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else-if="type==='PickMonth'">
|
||||
<PickMonth @month="selectMonth"></PickMonth>
|
||||
</div>
|
||||
<div v-else-if="type==='PickYear'">
|
||||
<PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
PickMonth: () => import('@/components/datepicker/PickMonth'),
|
||||
PickYear: () => import('@/components/datepicker/PickYear')
|
||||
},
|
||||
props: ['date', 'events', 'mode', 'vyear', 'vmonth'],
|
||||
data() {
|
||||
return {
|
||||
dates: [],
|
||||
dateOfWeek: [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}],
|
||||
weeks: [],
|
||||
today: this.$dayjs().format('YYYY/MM/DD'),
|
||||
year: undefined,
|
||||
month: undefined,
|
||||
type: 'days',
|
||||
caption: undefined,
|
||||
action: undefined,
|
||||
curdate: undefined,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showDate()
|
||||
},
|
||||
watch: {
|
||||
date: function(newVal) {
|
||||
if(newVal) this.showDate()
|
||||
},
|
||||
events: function(newVal) {
|
||||
this.showDate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDate() {
|
||||
this.curdate = this.date? this.date.replaceAll('-', '/') : undefined
|
||||
this.year = this.$dayjs(this.curdate || this.today).year()
|
||||
this.month = this.$dayjs(this.curdate || this.today).month() + 1
|
||||
if(this.vyear) this.year = this.$copy(this.vyear)
|
||||
if(this.vmonth) this.month = this.$copy(this.vmonth)
|
||||
this.getDates()
|
||||
},
|
||||
chooseToday() {
|
||||
this.$emit('date', this.today.replaceAll('/', '-'))
|
||||
this.year = this.$dayjs(this.today).year()
|
||||
this.month = this.$dayjs(this.today).month() + 1
|
||||
this.getDates()
|
||||
},
|
||||
changeCaption(v) {
|
||||
this.caption = v
|
||||
},
|
||||
selectMonth(v) {
|
||||
this.month = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
selectYear(v) {
|
||||
this.year = v
|
||||
this.getDates()
|
||||
this.type = 'days'
|
||||
},
|
||||
getDates() {
|
||||
this.caption = undefined
|
||||
this.dates = this.allDaysInMonth(this.year, this.month)
|
||||
this.dates.map(v=>{
|
||||
let event = this.events? this.$find(this.events, {isodate: v.date}) : undefined
|
||||
if(event) v.event = event
|
||||
})
|
||||
this.weeks = this.$unique(this.dates, ['week']).map(v=>{return {week: v.week}})
|
||||
this.weeks.map(v=>{
|
||||
v.dates = this.dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
},
|
||||
nextMonth() {
|
||||
let month = this.month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
this.year += 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
previousMonth() {
|
||||
let month = this.month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
this.year -= 1
|
||||
}
|
||||
this.month = month
|
||||
this.getDates()
|
||||
},
|
||||
nextYear() {
|
||||
if(this.type==='PickYear') return this.action = {name: 'next', id: this.$id()}
|
||||
this.year += 1
|
||||
this.getDates()
|
||||
},
|
||||
previousYear() {
|
||||
if(this.type==='PickYear') return this.action = {name: 'previous', id: this.$id()}
|
||||
this.year -= 1
|
||||
this.getDates()
|
||||
},
|
||||
choose(m) {
|
||||
this.$emit('date', m.date.replaceAll('/', '-'))
|
||||
},
|
||||
createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
},
|
||||
allDaysInMonth(year, month) {
|
||||
var weekday = require('dayjs/plugin/weekday')
|
||||
this.$dayjs.extend(weekday)
|
||||
var weekOfYear = require('dayjs/plugin/weekOfYear')
|
||||
this.$dayjs.extend(weekOfYear)
|
||||
let days = Array.from({length: this.$dayjs(this.createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = this.$dayjs(this.createDate(year, month, v)).weekday(i)
|
||||
let date = this.$dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = this.$dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = this.$dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = this.$dayjs(date).day()
|
||||
let week = this.$dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
169
components/datepicker/PickDay.vue
Normal file
169
components/datepicker/PickDay.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped mb-4 border-bottom">
|
||||
<div class="control pl-2">
|
||||
<a class="mr-1" @click="previousYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleleft.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="previousMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'left1.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded has-text-centered">
|
||||
<span class="fsb-16 mr-3" @click="type='months'" v-if="type==='days'">{{`T${month}`}}</span>
|
||||
<span class="fsb-16" @click="type='years'">{{ caption || year }}</span>
|
||||
</div>
|
||||
<div class="control pr-2">
|
||||
<a class="mr-1" @click="nextMonth()" v-if="type==='days'">
|
||||
<SvgIcon v-bind="{name: 'right.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="nextYear()">
|
||||
<SvgIcon v-bind="{name: 'doubleright.svg', type: 'gray', size: 18}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type==='days'">
|
||||
<div class="columns is-mobile mx-0">
|
||||
<div class="column px-2 py-1 has-text-grey-dark" v-for="(m,h) in dateOfWeek" :key="h">
|
||||
{{ m.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="`columns is-mobile mx-0 ${i===weeks.length-1? 'mb-1' : ''}`" v-for="(v,i) in weeks" :key="i">
|
||||
<div class="column px-3 py-1" v-for="(m,h) in v.dates" :key="h">
|
||||
<a class="fs-14" @click="choose(m)">
|
||||
<span class="has-background-primary has-text-white px-1 py-1" v-if="m.date===curdate">{{ m.dayPrint }}</span>
|
||||
<span class="has-background-findata has-text-white px-1 py-1" v-else-if="m.date===today">{{ m.dayPrint }}</span>
|
||||
<span class="has-text-grey" v-else-if="m.currentMonth!==m.mothCondition">{{ m.dayPrint }}</span>
|
||||
<span v-else>{{m.dayPrint}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-bottom"></div>
|
||||
<div class="mt-2">
|
||||
<span class="ml-2 mr-2">Hôm nay: </span>
|
||||
<span class="has-text-primary" @click="chooseToday()">{{ $dayjs(today).format('DD/MM/YYYY') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="type==='months'">
|
||||
<PickMonth @month="selectMonth"></PickMonth>
|
||||
</div>
|
||||
<div v-else-if="type==='years'">
|
||||
<PickYear v-bind="{year: year, month: month, action: action}" @year="selectYear" @caption="changeCaption"></PickYear>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import PickMonth from '@/components/datepicker/PickMonth'
|
||||
import PickYear from '@/components/datepicker/PickYear'
|
||||
const { $id, $dayjs, $unique} = useNuxtApp()
|
||||
const emit = defineEmits(['date'])
|
||||
var props = defineProps({
|
||||
date: String
|
||||
})
|
||||
var dates = []
|
||||
var dateOfWeek = [{id: 0, text: "CN"}, {id: 1, text: "T2"}, {id: 2, text: "T3"}, {id: 3, text: "T4"},
|
||||
{id: 4, text: "T5",}, {id: 5, text: "T6"}, {id: 6, text: "T7"}]
|
||||
var weeks = ref([])
|
||||
var year= undefined
|
||||
var month = undefined
|
||||
var type = 'days'
|
||||
var caption = undefined
|
||||
var action = undefined
|
||||
var curdate = undefined
|
||||
var today = new Date()
|
||||
|
||||
function showDate() {
|
||||
curdate = props.date? props.date.replaceAll('-', '/') : undefined
|
||||
year = $dayjs(curdate || today).year()
|
||||
month = $dayjs(curdate || today).month() + 1
|
||||
getDates()
|
||||
}
|
||||
function chooseToday() {
|
||||
emit('date', today.replaceAll('/', '-'))
|
||||
year = $dayjs(today).year()
|
||||
month = $dayjs(today).month() + 1
|
||||
getDates()
|
||||
}
|
||||
function changeCaption(v) {
|
||||
caption = v
|
||||
}
|
||||
function selectMonth(v) {
|
||||
month = v
|
||||
getDates()
|
||||
type = 'days'
|
||||
}
|
||||
function selectYear(v) {
|
||||
year = v
|
||||
getDates()
|
||||
type = 'days'
|
||||
}
|
||||
function getDates() {
|
||||
caption = undefined
|
||||
dates = allDaysInMonth(year, month)
|
||||
weeks.value = $unique(dates, ['week']).map(v=>{return {week: v.week}})
|
||||
weeks.value.map(v=>{
|
||||
v.dates = dates.filter(x=>x.week===v.week)
|
||||
})
|
||||
}
|
||||
function nextMonth() {
|
||||
month = month + 1
|
||||
if(month>12) {
|
||||
month = 1
|
||||
year += 1
|
||||
}
|
||||
getDates()
|
||||
}
|
||||
function previousMonth() {
|
||||
month = month - 1
|
||||
if(month===0) {
|
||||
month = 12
|
||||
year -= 1
|
||||
}
|
||||
getDates()
|
||||
}
|
||||
function nextYear() {
|
||||
if(type==='years') return action = {name: 'next', id: $id()}
|
||||
year += 1
|
||||
getDates()
|
||||
}
|
||||
function previousYear() {
|
||||
if(type==='years') return action = {name: 'previous', id: $id()}
|
||||
year -= 1
|
||||
getDates()
|
||||
}
|
||||
function choose(m) {
|
||||
emit('date', m.date.replaceAll('/', '-'))
|
||||
}
|
||||
function createDate(v, x, y) {
|
||||
return v + '/' + (x<10? '0' + x.toString() : x.toString()) + '/' + (y<10? '0' + y.toString() : y.toString())
|
||||
}
|
||||
function allDaysInMonth(year, month) {
|
||||
|
||||
let days = Array.from({length: $dayjs(createDate(year, month, 1)).daysInMonth()}, (_, i) => i + 1)
|
||||
let arr = []
|
||||
days.map(v=>{
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let thedate = $dayjs(createDate(year, month, v)).weekday(i)
|
||||
let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD")
|
||||
let dayPrint = $dayjs(new Date(thedate.$d)).format("DD")
|
||||
let mothCondition = $dayjs(date).month() +1
|
||||
let currentMonth = month
|
||||
let found = arr.find(x=>x.date===date)
|
||||
if(!found) {
|
||||
let dayOfWeek = $dayjs(date).day()
|
||||
let week = $dayjs(date).week()
|
||||
let ele = {date: date, week: week, day: v, dayOfWeek: dayOfWeek, dayPrint: dayPrint, mothCondition: mothCondition, currentMonth: currentMonth}
|
||||
arr.push(ele)
|
||||
}
|
||||
}
|
||||
})
|
||||
return arr
|
||||
}
|
||||
// display
|
||||
showDate()
|
||||
// change date
|
||||
watch(() => props.date, (newVal, oldVal) => {
|
||||
showDate()
|
||||
})
|
||||
|
||||
</script>
|
||||
16
components/datepicker/PickMonth.vue
Normal file
16
components/datepicker/PickMonth.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="columns is-mobile is-multiline mx-0">
|
||||
<div class="column is-4 px-3" v-for="v in months">
|
||||
<span class="hyperlink fs-14" @click="$emit('month', v)">{{ `Tháng ${v}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
months: [1,2,3,4,5,6,7,8,9,10,11,12]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
components/datepicker/PickYear.vue
Normal file
55
components/datepicker/PickYear.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="columns is-mobile is-multiline mx-0">
|
||||
<div class="column is-4 has-text-centered" v-for="(v,i) in years">
|
||||
<span class="hyperlink" :class="i===0 || i===11? 'has-text-grey' : ''" @click="$emit('year', v)">{{ `${v}` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['year', 'month', 'action'],
|
||||
data() {
|
||||
return {
|
||||
years: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.years = [this.year]
|
||||
for(let i = 1; i < 7; i++) {
|
||||
this.years.push(this.year+i)
|
||||
this.years.push(this.year-i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
},
|
||||
watch: {
|
||||
action: function(newVal) {
|
||||
if(newVal.name==='next') this.next()
|
||||
if(newVal.name==='previous') this.previous()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
let year = this.years[this.years.length-1]
|
||||
this.years = []
|
||||
for(let i = 0; i < 12; i++) {
|
||||
this.years.push(year+i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
},
|
||||
previous() {
|
||||
let year = this.years[0]
|
||||
this.years = []
|
||||
for(let i = 0; i < 12; i++) {
|
||||
this.years.push(year-i)
|
||||
}
|
||||
this.years.sort(function(a, b) {return a - b;})
|
||||
this.years = this.years.slice(0,12)
|
||||
this.$emit('caption', `${this.years[1]}-${this.years[10]}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
16
components/datepicker/ViewEvent.vue
Normal file
16
components/datepicker/ViewEvent.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<span v-html="row.event.name"></span>
|
||||
<!--<p v-for="v in data">{{ v.text }}</p>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row'],
|
||||
data() {
|
||||
return {
|
||||
data: this.row.event.arr
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
69
components/dialog/ApprovalCode.vue
Normal file
69
components/dialog/ApprovalCode.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Nhập mã duyệt'}"></Caption>
|
||||
<div class="field is-grouped mt-5">
|
||||
<div class="control mr-5" v-for="v in [1,2,3,4]">
|
||||
<input class="input is-dark" style="font-size: 18px; max-width: 40px; font-weight:bold; text-align: center;" type="password"
|
||||
maxlength="1" :id="`input${v}`" v-model="data[v]" @keyup="changeNext(v)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a @click="reset()">Nhập lại</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
code: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
if(!this.approvalcode && this.$store.state.login.approval_code) this.approvalcode = this.$store.state.login.approval_code
|
||||
if(!this.approvalcode) {
|
||||
let user = await this.$getdata('user', {id: this.$store.state.login.id}, undefined, true)
|
||||
this.approvalcode = user.approval_code
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reset()
|
||||
},
|
||||
computed: {
|
||||
approvalcode: {
|
||||
get: function() {return this.$store.state['approvalcode']},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: 'approvalcode', data: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkError() {
|
||||
if(Object.keys(this.data).length<4) return true
|
||||
let code = ''
|
||||
for (const [key, value] of Object.entries(this.data)) {
|
||||
if(!this.$empty(value)) code += value.toString()
|
||||
}
|
||||
if(this.$empty(code) || !this.$isNumber(code)) return true
|
||||
this.code = code
|
||||
return false
|
||||
},
|
||||
checkValid() {
|
||||
if(this.checkError()) return this.$snackbar('Mã phê duyệt không hợp lệ')
|
||||
if(this.code!==this.approvalcode) return this.$snackbar('Mã phê duyệt không chính xác')
|
||||
this.$emit('modalevent', {name: 'approvalcode', data: this.code})
|
||||
this.$emit('close')
|
||||
},
|
||||
changeNext(v) {
|
||||
if(this.$empty(this.data[v])) return
|
||||
else if(v===4) return this.checkValid()
|
||||
let doc = document.getElementById(`input${v+1}`)
|
||||
if(doc) doc.focus()
|
||||
},
|
||||
reset() {
|
||||
this.data = {}
|
||||
let doc = document.getElementById(`input1`)
|
||||
if(doc) doc.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
34
components/dialog/Confirm.vue
Normal file
34
components/dialog/Confirm.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-primary has-text-white" @click="confirm()">{{ store.lang==='en'? 'Accept' : 'Đồng ý'}} </button>
|
||||
<button class="button is-dark ml-5" @click="cancel()">{{store.lang==='en'? 'Cancel' : 'Hủy bỏ'}} </button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
},
|
||||
confirm() {
|
||||
this.$emit('modalevent', {name: 'confirm'})
|
||||
this.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
75
components/dialog/CountDown.vue
Normal file
75
components/dialog/CountDown.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div id="countdown">
|
||||
<div id="countdown-number"></div>
|
||||
<svg><circle r="18" cx="20" cy="20" color="red"></circle></svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['duration'],
|
||||
data() {
|
||||
return {
|
||||
timer: undefined,
|
||||
countdown: this.duration || 10
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var countdownNumberEl = document.getElementById('countdown-number')
|
||||
countdownNumberEl.textContent = this.countdown;
|
||||
this.timer = setInterval(()=>this.startCount(), 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
startCount() {
|
||||
this.countdown -= 1
|
||||
var countdownNumberEl = document.getElementById('countdown-number')
|
||||
countdownNumberEl.textContent = this.countdown;
|
||||
if(this.countdown===0) {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#countdown {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
#countdown-number {
|
||||
color: black;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
:deep(svg) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: rotateY(-180deg) rotateZ(-90deg);
|
||||
}
|
||||
:deep(svg circle) {
|
||||
stroke-dasharray: 113px;
|
||||
stroke-dashoffset: 0px;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 2px;
|
||||
stroke: black;
|
||||
fill: none;
|
||||
animation: countdown 10s linear infinite forwards;
|
||||
}
|
||||
@keyframes countdown {
|
||||
from {
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 113px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
components/dialog/Delete.vue
Normal file
47
components/dialog/Delete.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-4 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-danger" @click="remove()">Đồng ý</button>
|
||||
<button class="button is-dark ml-5" @click="cancel()">Hủy bỏ</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration', 'vbind', 'setdeleted'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
},
|
||||
async remove() {
|
||||
let pagename = this.vbind.pagename
|
||||
let pagedata = this.$store.state[pagename]
|
||||
let name = pagedata.origin_api.name || this.vbind.api
|
||||
let id = this.vbind.row.id
|
||||
let result
|
||||
if(this.setdeleted) {
|
||||
let record = await this.$getdata(name, {id: id}, undefined, true)
|
||||
record.deleted = 1
|
||||
result = await this.$updateapi(name, record)
|
||||
} else result = await this.$deleteapi(name, id)
|
||||
if(result==='error') return this.$dialog('Đã xảy ra lỗi, xóa dữ liệu thất bại', 'Lỗi', 'Error')
|
||||
this.$snackbar('Dữ liệu đã được xoá khỏi hệ thống', undefined, 'Success')
|
||||
let arr = Array.isArray(id)? id : [{id: id}]
|
||||
let copy = this.$copy(this.$store.state[pagename].data)
|
||||
arr.map(x=>{
|
||||
let index = copy.findIndex(v=>v.id===x.id)
|
||||
index>=0? this.$delete(copy,index) : false
|
||||
})
|
||||
this.$store.commit('updateState', {name: pagename, key: 'update', data: {data: copy}})
|
||||
this.cancel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
components/dialog/Error.vue
Normal file
28
components/dialog/Error.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded pr-3" v-html="content"></div>
|
||||
<div class="control">
|
||||
<SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-danger has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
content: String,
|
||||
duration: Number
|
||||
})
|
||||
function cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
</script>
|
||||
24
components/dialog/Info.vue
Normal file
24
components/dialog/Info.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<p v-html="content"></p>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-dark has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
components/dialog/Success.vue
Normal file
29
components/dialog/Success.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded pr-3" v-html="content"></div>
|
||||
<div class="control">
|
||||
<SvgIcon v-bind="{name: 'check2.svg', type: 'primary', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<p class="border-bottom mt-3 mb-5"></p>
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<button class="button is-primary has-text-white" @click="cancel()">Đóng</button>
|
||||
</div>
|
||||
<div class="control" v-if="duration">
|
||||
<CountDown v-bind="{duration: duration}" @close="cancel()"></CountDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'duration'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
40
components/maintab/Configuration.vue
Normal file
40
components/maintab/Configuration.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="columns mx-0">
|
||||
<div class="column is-2">
|
||||
<div class="py-1" v-for="v in array">
|
||||
<a :class="(current? current.code===v.code : false)? 'has-text-primary has-text-weight-bold' : ''" @click="changeTab(v)">{{ v.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="fsb-20 mb-3" v-if="current">{{ current.name }}</div>
|
||||
<DataView v-bind="current.vbind" v-if="current"></DataView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
const { $clone } = useNuxtApp()
|
||||
|
||||
var array = [
|
||||
{code: 'systemsetting', name: 'System setting', vbind: {api: 'systemsetting', setting: 'common-fields-1', pagename: 'pagedata8.8.8',
|
||||
timeopt: 36000,
|
||||
modal: {component: 'parameter/Common', title: 'System setting', vbind: {api: 'systemsetting'}}}},
|
||||
|
||||
{code: 'emailsetup', name: 'Email setup', vbind: {api: 'emailsetup', setting: 'email-setup', pagename: 'pagedata8.8.8',
|
||||
timeopt: 36000,
|
||||
modal: {component: 'parameter/EmailSetup', title: 'Email setup', width: '600px', height: '300px', vbind: {api: 'emailsetup'}}}},
|
||||
|
||||
{code: 'settingfields', name: 'Setting fields',
|
||||
vbind: {api: 'settingfields', setting: 'system-setting-fields', pagename: 'pagedata8.8.8', timeopt: 36000,
|
||||
modal: {component: 'parameter/SettingFields', title: 'Setting fields', vbind: {api: 'settingfields'}}}}
|
||||
]
|
||||
var current = ref(array[0])
|
||||
function changeTab(v) {
|
||||
current.value = null
|
||||
let copy = $clone(store['pagedata8.8.8'])
|
||||
copy.filters = []
|
||||
store.commit('pagedata8.8.8', copy)
|
||||
setTimeout(()=>current.value = v)
|
||||
}
|
||||
</script>
|
||||
72
components/maintab/DataDeletion.vue
Normal file
72
components/maintab/DataDeletion.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="columns is-centered mx-0">
|
||||
<div class="column is-6">
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p class="fsb-20 has-text-white">{{$lang('warning')}}</p>
|
||||
</div>
|
||||
<div class="message-body has-text-black fs-17">
|
||||
{{$lang('alert')}}
|
||||
</div>
|
||||
</article>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<label class="label">{{ $lang('confirm') }} <b class="has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$lang('info')" v-model="text">
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.text">{{ errors.text }}</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $lang('hash') }} <b class="has-text-danger">*</b></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="secret key" v-model="password">
|
||||
</div>
|
||||
<p class="help has-text-danger" v-if="errors.password">{{ errors.password }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button :class="`button is-danger ${loading? 'is-loading' : ''} has-text-white`" @click="deletion()">
|
||||
Xóa dữ liệu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $empty, $insertapi, $snackbar, $lang } = useNuxtApp()
|
||||
var text = ref()
|
||||
var password = ref()
|
||||
var hash = ref()
|
||||
var loading = ref(false)
|
||||
var errors = ref({})
|
||||
async function sha256(str) {
|
||||
const buffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
|
||||
return Array.from(new Uint8Array(buffer)).map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
async function checkError() {
|
||||
errors.value = {}
|
||||
if(text.value!=='delete') errors.value.text = "Chưa nhập xác nhận xóa"
|
||||
if($empty(password.value)) errors.value.password = "Chưa nhập chuỗi bí mật"
|
||||
else {
|
||||
hash.value = await sha256(password.value)
|
||||
if(hash.value !=='8816f9082eb2a9adf08dca6e0273d40908f409b6f8ca60bbeedd5d8d437c603b') {
|
||||
errors.value.password = "Chuỗi bí mật không chính xác"
|
||||
}
|
||||
}
|
||||
return Object.keys(errors.value).length>0
|
||||
}
|
||||
async function deletion() {
|
||||
let rs = await checkError()
|
||||
if(rs) return
|
||||
loading.value = true
|
||||
rs = await $insertapi('datadeletion', {password: password.value, hash: hash.value})
|
||||
if(rs==='error') $snackbar($lang('delete-error'))
|
||||
else $snackbar($lang('delete-success'))
|
||||
text.value = undefined
|
||||
password.value = undefined
|
||||
loading.value = false
|
||||
}
|
||||
</script>
|
||||
84
components/media/Camera.vue
Normal file
84
components/media/Camera.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<div><video ref="video" id="video" width="640" height="480" autoplay></video></div>
|
||||
<div class="mt-2">
|
||||
<button class="button is-primary" id="snap" v-on:click="capture()">Chụp ảnh</button>
|
||||
<a class="ml-6" @click="switchView()">
|
||||
<SvgIcon v-bind="{name: 'camera_switch.svg', type: 'black', size: 40}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<canvas v-show="false" ref="canvas" id="canvas" width="640" height="480"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
video: {},
|
||||
canvas: {},
|
||||
current: 'front'
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.openCamera()
|
||||
},
|
||||
beforeDestroy() {
|
||||
var vidTrack = this.video.srcObject.getVideoTracks()
|
||||
vidTrack.forEach(track => {
|
||||
track.stop()
|
||||
track.enabled = false
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openCamera() {
|
||||
let f = this.current==='front'? {facingMode: "user"} : {facingMode: {exact: "environment"}}
|
||||
this.video = this.$refs.video;
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
navigator.mediaDevices.getUserMedia({ video: f, audio: false }).then(stream => {
|
||||
video.srcObject = stream;
|
||||
this.video.play();
|
||||
});
|
||||
}
|
||||
},
|
||||
capture() {
|
||||
this.canvas = this.$refs.canvas;
|
||||
let scale = 600 / this.video.videoWidth;
|
||||
let w = this.video.videoWidth * scale;
|
||||
let h = this.video.videoHeight * scale;
|
||||
this.canvas.width = w;
|
||||
this.canvas.height = h;
|
||||
var context = this.canvas
|
||||
.getContext("2d")
|
||||
.drawImage(this.video,0,0,w,h);
|
||||
this.canvas.toBlob(blod=>this.saveAs(blod))
|
||||
},
|
||||
async saveAs(blod) {
|
||||
var form = new FormData();
|
||||
let name = `${this.$id()}.png`
|
||||
this.fileName = `${this.$dayjs(new Date()).format("YYYYMMDDhhmmss")}-${name}`
|
||||
form.append('filename', this.fileName)
|
||||
form.append('name', name)
|
||||
form.append('file', blod)
|
||||
form.append('type', 'image')
|
||||
form.append('size', 100)
|
||||
form.append('user', this.$store.state.login.id)
|
||||
let result = await this.$insertapi('upload', form)
|
||||
if(result==='error') return
|
||||
let row = result.rows[0]
|
||||
const file = new File([blod], name, {type: "image/png"})
|
||||
row.source = {file: file}
|
||||
this.$emit('modalevent', {name: 'selectimage', data: row})
|
||||
this.$emit('close')
|
||||
},
|
||||
switchView() {
|
||||
this.current = this.current==='front'? 'back' : 'front'
|
||||
var vidTrack = this.video.srcObject.getVideoTracks()
|
||||
vidTrack.forEach(track => {
|
||||
track.stop()
|
||||
track.enabled = false
|
||||
})
|
||||
this.openCamera()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
components/media/ChipImage.vue
Normal file
81
components/media/ChipImage.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="image-container">
|
||||
<a @click="open()"><img :src="image" style="max-height: 86vh !important;"></a>
|
||||
<div class="image-label">
|
||||
<span class="is-clickable" @click="copyImage()" v-if="display.findIndex(v=>v==='copy')>=0">
|
||||
<SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
<span class="is-clickable ml-5" @click="download()" v-if="display.findIndex(v=>v==='download')>=0">
|
||||
<SvgIcon v-bind="{name: 'download.svg', type: 'primary', size: 20}"></SvgIcon>
|
||||
</span>
|
||||
<span class="is-clickable ml-5" @click="askConfirm()" v-if="display.findIndex(v=>v==='delete')>=0">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'danger', size: 18}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" @remove="remove" @confirm="remove()" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['row', 'api', 'pagename', 'file', 'image', 'show', 'extend'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
display: this.show || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
if(!this.file || this.extend===false) return
|
||||
this.showmodal = {title: this.file.file__name, component: 'media/ChipImage',
|
||||
vbind: {extend: false, show: this.show, file: this.file,
|
||||
image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`}}
|
||||
},
|
||||
info() {
|
||||
if(!this.file) return
|
||||
this.showmodal = {vbind: {file: this.file}, component: 'media/ImageAttr',
|
||||
title: 'Thông tin trích xuất từ hình ảnh', width: '35%', height: '50vh'}
|
||||
},
|
||||
find() {
|
||||
this.showmodal = {vbind: {row: this.row, api: this.api, pagename: this.pagename}, component: 'ekyc/IDcheck',
|
||||
title: 'Kiểm tra CMT / CCCD / HC / GPLX / CMT-CA / CMT-QD', width: '90%', height: '70vh'}
|
||||
},
|
||||
download() {
|
||||
let name = this.file? this.file.file__name || this.file.name : 'download'
|
||||
let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
|
||||
this.$download(path, name)
|
||||
},
|
||||
askConfirm() {
|
||||
let text = this.store.lang==='en'? 'Do you agree to delete this image' : `Bạn có đồng ý <b>xóa hình ảnh</b> này không?`
|
||||
this.showmodal = {component: `dialog/Confirm`,title: this.store.lang==='en'? 'Confirm' : 'Xác nhận', width: '500px', height: '100px',
|
||||
vbind: {content: text, duration: 10}}
|
||||
},
|
||||
remove() {
|
||||
this.showmodal = undefined
|
||||
this.$emit('modalevent', {name: 'remove'})
|
||||
this.$emit('remove')
|
||||
},
|
||||
async copyImage() {
|
||||
try {
|
||||
const response = await fetch(`${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`);
|
||||
const blob = await response.blob()
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
[blob.type]: blob
|
||||
})
|
||||
])
|
||||
this.$snackbar('Copied to clipboard')
|
||||
} catch (err) {
|
||||
console.error(err.name, err.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
components/media/CropImage.vue
Normal file
91
components/media/CropImage.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="tile is-ancestor py-5 px-3 mx-0" v-if="image">
|
||||
<div class="tile is-1"/>
|
||||
<div class="tile is-7">
|
||||
<Cropper
|
||||
ref="cropper"
|
||||
:src="image"
|
||||
@change="onChange"
|
||||
:stencil-props="getRatio" />
|
||||
</div>
|
||||
<div class="tile is-1"> </div>
|
||||
<div class="tile">
|
||||
<div v-if="avatar!==true">
|
||||
<p class="mt-2 fs-16">Chọn tỷ lệ hoặc nhập chiều rộng và cao</p>
|
||||
<div class="tags are-medium mt-2">
|
||||
<a :class="curRatio.k===v.k? 'tag is-primary' : 'tag'" v-for="(v,i) in ratios" :key="i" @click="curRatio=v">{{v.k}}</a>
|
||||
</div>
|
||||
<div class="block mt-5">
|
||||
<b-radio v-model="radio"
|
||||
native-value="replace">
|
||||
Ghi đè
|
||||
</b-radio>
|
||||
<b-radio v-model="radio" class="ml-3"
|
||||
native-value="new">
|
||||
Tạo file mới
|
||||
</b-radio>
|
||||
</div>
|
||||
<p class="mt-4">
|
||||
<a class="button is-primary mr-4 mb-2" :class="loading? 'is-loading' : ''" @click="updateImage()">Lưu lại</a>
|
||||
</p>
|
||||
<p class="mt-2" v-if="coordinates">
|
||||
Hình ảnh cắt, {{'W: ' + coordinates.width + ', H: ' + coordinates.height + ', W/H: ' + coordinates.ratio}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-italic has-text-grey" v-else>* Di chuyển khung để chọn hình ảnh phù hợp</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CircleStencil, Cropper } from 'vue-advanced-cropper'
|
||||
import 'vue-advanced-cropper/dist/style.css'
|
||||
export default {
|
||||
components: {
|
||||
Cropper,
|
||||
CircleStencil
|
||||
},
|
||||
props: ['selected', 'image', 'avatar'],
|
||||
data() {
|
||||
return {
|
||||
coordinates: undefined,
|
||||
ratios: [{k: '1/1'}, {k: '5/4'}, {k:'4/3'}, {k: '3/2'}, {k: '5/3'}, {k:'16/9'}, {k: '2/1'}, {k: '3/1'}, {k: '4/5'}, {k: '3/4'}, {k: '2/3'}, {k: '3/5'}, {k: '9/16'}, {k: '1/2'}, {k: '1/3'}],
|
||||
curRatio: {k: '1/1'},
|
||||
radio: this.avatar? 'new' : 'replace',
|
||||
rectangle: true,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getRatio() {
|
||||
return {aspectRatio: this.$calc(this.curRatio.k)}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange({ coordinates, canvas}) {
|
||||
this.coordinates = coordinates
|
||||
this.coordinates.ratio = (this.coordinates.width*1.00 / this.coordinates.height).toFixed(2)
|
||||
},
|
||||
updateImage() {
|
||||
const { canvas } = this.$refs.cropper.getResult()
|
||||
if (canvas) canvas.toBlob(blod=>this.saveAs(blod))
|
||||
},
|
||||
async saveAs(blod) {
|
||||
this.loading = true
|
||||
var form = new FormData();
|
||||
let name = this.selected.file.indexOf('-')>0? this.selected.file.substring(15, this.selected.file.length) : this.selected.file
|
||||
this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + '-' + name
|
||||
if(this.radio==='replace') this.fileName = this.selected.file
|
||||
form.append('filename', this.fileName)
|
||||
form.append('name', name)
|
||||
form.append('file', blod)
|
||||
form.append('type', 'file')
|
||||
form.append('size', this.selected.size)
|
||||
form.append('user', this.$store.state.login.id)
|
||||
let result = await this.$insertapi('upload', form)
|
||||
this.loading = false
|
||||
if(result==='error') return
|
||||
this.$emit('modalevent', {name: 'image', data: result.rows[0]})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
components/media/FileCount.vue
Normal file
32
components/media/FileCount.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="tooltip">
|
||||
<span class="dot-twitter" @click="doClick()">{{ row[attr] || 0 }}</span>
|
||||
<span class="tooliptext">Hồ sơ</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'api', 'pagename', 'attr'],
|
||||
methods: {
|
||||
async doClick() {
|
||||
let obj
|
||||
if(this.attr==='image_count') {
|
||||
let rs = await this.$getdata(this.api, {ref: this.row.id, file__type: 2})
|
||||
if(rs.length>0) {
|
||||
obj = {component: 'media/ImageShow', title: 'Hồ sơ', width: '80%', height: '70vh',
|
||||
vbind: {row: this.row, image: rs.map(v=>v.file__file), pagename: this.pagename, api: this.api}}
|
||||
} else {
|
||||
obj = {component: 'media/ImageGallery', vbind: {row: this.row, pagename: this.pagename, api: this.api},
|
||||
width: '50%', height: '500px', title: 'Hình ảnh'}
|
||||
}
|
||||
} else {
|
||||
let vbind = {row: this.row, api: this.api, setting: 'media-fields', filter: {ref: this.row.id, file__type: 1}}
|
||||
obj = {component: 'media/FileList', title: 'Hồ sơ', width: '50%', height: '300px', vbind: vbind}
|
||||
}
|
||||
this.$emit('open', {name: 'dataevent', data: {modal: obj}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
components/media/FileGallery.vue
Normal file
49
components/media/FileGallery.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div v-if="files">
|
||||
<div class="has-text-right" v-if="!hideopt">
|
||||
<FileUpload v-bind="{type: 'file', position: position}" @files="getFiles"></FileUpload>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mt-3 has-text-grey fs-15" v-if="files.length===0 && info!==false">
|
||||
Chưa có tài liệu được tải lên
|
||||
</div>
|
||||
<DataView v-bind="vbind" v-else-if="vbind"></DataView>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'pagename', 'api', 'hideopt', 'setting', 'info', 'position'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
files: undefined,
|
||||
vbind: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.files = await this.$getdata(this.api, {ref: this.row.id, file__type: 1})
|
||||
if(this.files.length>0) this.vbind = {api: this.api, setting: this.setting || 'media-fields', data: this.files}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.showmodal = {component: 'media/Imagebox', width: '70%', title: 'Chọn hình ảnh', height: '500px'}
|
||||
},
|
||||
async remove(v, i) {
|
||||
this.$delete(this.files, i)
|
||||
await this.$deleteapi(this.api, v.id)
|
||||
},
|
||||
async getFiles(files) {
|
||||
let arr = files.map(v=>{return {ref: this.row.id, file: v.id}})
|
||||
let found = this.$findapi(this.api)
|
||||
let rs = await this.$insertapi(this.api, arr, found.params.values)
|
||||
if(rs!=='error') {
|
||||
this.files = this.files.concat(rs)
|
||||
this.vbind = undefined
|
||||
setTimeout(()=>this.vbind = {api: this.api, setting: 'media-fields', data: this.files}, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
components/media/FileInfo.vue
Normal file
37
components/media/FileInfo.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div v-if="record">
|
||||
<div class="field">
|
||||
<label class="label">Tên<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Nhập số" v-model="record.name">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<label class="label">Ghi chú<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="" rows="3" v-model="record.caption"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button class="button is-primary" @click="save()">Lưu lại</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'pagename'],
|
||||
data() {
|
||||
return {
|
||||
record: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.record = await this.$getdata('file', {id: this.row.file || this.row.id}, undefined, true)
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
let rs = await this.$updateapi('file', this.record)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
47
components/media/FileList.vue
Normal file
47
components/media/FileList.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<FileUpload v-bind="{type: 'file'}" @files="getFiles"></FileUpload>
|
||||
<DataView v-if="vbind" v-bind="vbind"></DataView>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'pagename', 'api', 'setting'],
|
||||
data() {
|
||||
return {
|
||||
vbind: undefined,
|
||||
files: undefined,
|
||||
pagename1: this.$findpage()
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pagedata = this.$getpage()
|
||||
this.files = await this.$getdata(this.api, {ref: this.row.id, file__type: 1})
|
||||
this.vbind = {pagename: this.pagename1, api: this.api, setting: this.setting, data: this.$copy(this.files)}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$clearpage(this.pagename1)
|
||||
},
|
||||
computed: {
|
||||
pagedata: {
|
||||
get: function() {return this.$store.state[this.pagename1]},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: this.pagename1, data: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getFiles(files) {
|
||||
let arr = files.map(v=>{return {ref: this.row.id, file: v.id}})
|
||||
let found = this.$findapi(this.api)
|
||||
let rs = await this.$insertapi(this.api, arr, found.params.values)
|
||||
if(rs==='error') return
|
||||
this.files = this.files.concat(rs)
|
||||
this.$store.commit('updateState', {name: this.pagename1, key: 'update', data: {data: this.$copy(this.files)}})
|
||||
if(this.pagename) {
|
||||
let vapi = this.api.replace('file', '')
|
||||
let ele = await this.$getdata(vapi, {id: this.row.id}, undefined, true)
|
||||
this.$updatepage(this.pagename, ele)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
42
components/media/FileShow.vue
Normal file
42
components/media/FileShow.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<p class="py-1 border-bottom" v-for="(v,i) in vfiles">
|
||||
<a class="mr-4" @click="open(v)">{{ v.name }}</a>
|
||||
<a class="mr-4" @click="download(v, i)">
|
||||
<SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="remove(v, i)" v-if="show? show.delete : false">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'dark', size: 16}"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $copy, $getpath, $download } = useNuxtApp()
|
||||
const emit = defineEmits(['remove', 'close'])
|
||||
var props = defineProps({
|
||||
files: Object,
|
||||
show: Object
|
||||
})
|
||||
var showmodal = ref()
|
||||
var vfiles = ref($copy(props.files))
|
||||
function remove(v, i) {
|
||||
vfiles.value.splice(i, 1)
|
||||
emit('remove', {v: v, i: i})
|
||||
emit('modalevent', {name: 'removefile', data: {v: v, i: i}})
|
||||
if(vfiles.value.length===0) emit('close')
|
||||
}
|
||||
function open(v) {
|
||||
if(v.name.indexOf('.png')>=0 || v.name.indexOf('.jpg')>=0 || v.name.indexOf('.jpeg')>=0) {
|
||||
showmodal.value = {title: v.file__file || v.file, component: 'media/ChipImage',
|
||||
vbind: {extend: false, file: v, image: `${$getpath()}download/?name=${v.file__file || v.file}&type=file`}}
|
||||
return
|
||||
}
|
||||
window.open(`${$getpath()}download/?name=${v.file__file || v.file}&type=file`)
|
||||
}
|
||||
function download(v) {
|
||||
$download(`${$getpath()}download/?name=${v.file}&type=file`, v.name)
|
||||
}
|
||||
watch(() => props.files, (newVal, oldVal) => {
|
||||
vfiles.value = props.files
|
||||
})
|
||||
</script>
|
||||
69
components/media/FileUpload.vue
Normal file
69
components/media/FileUpload.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="file is-primary" id="ignore" v-if="position==='left'">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
|
||||
<span class="file-cta px-2">
|
||||
<span class="icon-text is-clickable">
|
||||
<SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
|
||||
<!--<span class="has-text-white">File</span>-->
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-right" id="ignore" v-else>
|
||||
<div class="control">
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
|
||||
<span class="file-cta px-1">
|
||||
<span class="icon-text is-clickable">
|
||||
<SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
|
||||
<!--<span class="has-text-white">File</span>-->
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @files="getFiles"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['type', 'position'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
files: undefined,
|
||||
dataFiles: [],
|
||||
vtype: this.type || 'image',
|
||||
showmodal: undefined,
|
||||
docid: this.$id()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doChange() {
|
||||
this.dataFiles = []
|
||||
let fileList = document.getElementById(this.docid).files
|
||||
this.files = Array.from(fileList)
|
||||
if(this.files.length===0) return
|
||||
this.files.map(v=>{
|
||||
let file = this.$upload(v, this.vtype, 1, '0') //this.$store.state.login.id
|
||||
this.dataFiles.push(file)
|
||||
})
|
||||
this.showmodal = {component: 'media/UploadProgress', title: 'Upload files', width: '700px', height: '200px', vbind: {files: this.dataFiles}}
|
||||
this.clearFileList()
|
||||
},
|
||||
clearFileList() {
|
||||
const fileInput = document.getElementById(this.docid);
|
||||
const dt = new DataTransfer()
|
||||
fileInput.files = dt.files
|
||||
},
|
||||
getFiles(files) {
|
||||
this.$emit('files', files)
|
||||
setTimeout(()=>this.showmodal=undefined, 3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
components/media/ImageAttr.vue
Normal file
41
components/media/ImageAttr.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="table" v-if="attrs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="170px">Thông tin</th>
|
||||
<th>Diễn giải</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="v in attrs">
|
||||
<td>{{ v.name }}</td>
|
||||
<td>
|
||||
<span class="icon-text">
|
||||
<span>{{ v.value }}</span>
|
||||
<span class="ml-5" v-if="!$empty(v.match)">
|
||||
<SvgIcon v-bind="{name: v.match? 'check2.svg' : 'error.svg', type: v.match? 'blue' : 'danger', size: 26}"></SvgIcon>
|
||||
</span>
|
||||
<span class="ml-5" v-if="!$empty(v.auth)">
|
||||
<SvgIcon v-bind="{name: v.auth? 'check2.svg' : 'error.svg', type: v.auth? 'blue' : 'danger', size: 26}"></SvgIcon>
|
||||
</span>
|
||||
<span class="ml-5" v-if="!$empty(v.expiry)">
|
||||
<SvgIcon v-bind="{name: v.expiry? 'error.svg' : 'check2.svg', type: v.expiry? 'danger' : 'blue', size: 26}"></SvgIcon>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['file'],
|
||||
data() {
|
||||
return {
|
||||
attrs: this.file? this.file.file__verified_info || this.file.verified_info: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
components/media/ImageGallery.vue
Normal file
54
components/media/ImageGallery.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div v-if="files">
|
||||
<div class="has-text-right" v-if="!hideopt">
|
||||
<FileUpload @files="getFiles"></FileUpload>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-multiline" v-if="files.length>0">
|
||||
<div class="control mb-2" v-for="(v,i) in files">
|
||||
<ChipImage style="width: 128px;" @remove="remove(v,i)"
|
||||
v-bind="{row: row, show: show, pagename: pagename, api: api, file: v, image: `${$getpath()}download/?name=${v.file__file}&type=file`}"></ChipImage>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 has-text-grey f5-16" v-if="files.length===0">
|
||||
{{ store.lang==='en'? 'No images' : "Chưa có hình ảnh"}}
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
props: ['row', 'pagename', 'api', 'hideopt', 'vapi', 'show'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
files: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.files = await this.$getdata(this.api, {ref: this.row.id, file__type: 2})
|
||||
},
|
||||
methods: {
|
||||
async remove(v, i) {
|
||||
this.$remove(this.files, i)
|
||||
await this.$deleteapi(this.api, v.id)
|
||||
},
|
||||
async getFiles(files) {
|
||||
let arr = files.map(v=>{return {ref: this.row.id, file: v.id}})
|
||||
let found = this.$findapi(this.api)
|
||||
let rs = await this.$insertapi(this.api, arr, found.params.values)
|
||||
if(rs==='error') return
|
||||
this.files = this.files.concat(rs)
|
||||
if(this.pagename) {
|
||||
let vapi = this.vapi? this.vapi : this.api.replace('file', '')
|
||||
let ele = await this.$getdata(vapi, {id: this.row.id}, undefined, true)
|
||||
this.$updatepage(this.pagename, ele)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
components/media/ImageShow.vue
Normal file
58
components/media/ImageShow.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="columns mx-0" v-if="picture">
|
||||
<div class="column is-narrow" style="border-right: 2px solid #D3D3D3;" v-if="viewport>1">
|
||||
<div class="pr-2" style="max-height: 700px; overflow-y: auto;">
|
||||
<div v-for="(v,i) in picture" class="pb-4">
|
||||
<figure class="image is-clickable" style="width:80px" @click="current=i">
|
||||
<img :src="v.image">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<b-carousel :autoplay="false" :indicator="viewport===1? true : false" icon-size="is-medium" v-model="current">
|
||||
<b-carousel-item v-for="(item, i) in picture" :key="i">
|
||||
<ChipImage @remove="check(item, i)" v-bind="{extend: false, image: item.image, file: item.file, show: ['download', 'delete']}"></ChipImage>
|
||||
</b-carousel-item>
|
||||
</b-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row', 'image', 'pagename', 'api'],
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
picture: undefined,
|
||||
timer: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let arr = []
|
||||
let files = await this.$getdata('file', {file__in: this.image})
|
||||
this.image.map(v=>{
|
||||
let found = this.$find(files, {file: v})
|
||||
arr.push({image: `${this.$getpath()}download/?name=${v}`, file: found})
|
||||
})
|
||||
this.picture = arr
|
||||
},
|
||||
computed: {
|
||||
viewport: {
|
||||
get: function() {return this.$store.state.viewport},
|
||||
set: function(val) {this.$store.commit("updateViewPort", {viewport: val})}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
check(v, i) {
|
||||
if(!this.timer) this.timer = setTimeout(()=>this.remove(v,i), 200)
|
||||
},
|
||||
async remove(v, i) {
|
||||
this.$delete(this.picture, i)
|
||||
await this.$deleteapi(this.api, v.file.id)
|
||||
this.timer = undefined
|
||||
if(this.picture.length===0) this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
288
components/media/Imagebox.vue
Normal file
288
components/media/Imagebox.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="is-hidden"><img id="image" :src="image"></div>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
|
||||
<a class="button is-primary is-small has-text-white" :class="loading? 'is-loading' : null">
|
||||
<SvgIcon v-bind="{name: 'add5.svg', type: 'white', size: 18}"></SvgIcon>
|
||||
<span class="fs-14 ml-1">Tải lên từ máy tính</span>
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="`control ${showUrl? '' : 'is-expanded'}`">
|
||||
<a class="button is-dark is-small has-text-white" @click="displayInput()">
|
||||
<SvgIcon v-bind="{name: 'add5.svg', type: 'white', size: 18}"></SvgIcon>
|
||||
<span class="fs-14 ml-1">Tải lên từ đường dẫn</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control is-expanded" v-if="showUrl">
|
||||
<input class="input is-small" id="url" v-model="url" style="width: 250px;" type="text" placeholder="Nhập đường dẫn vào đây">
|
||||
<a class="button is-primary is-small px-4 ml-3" @click="checkUrl()">
|
||||
<SvgIcon v-bind="{name: 'upload.svg', type: 'white', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-4" @click="showUrl=false">
|
||||
<SvgIcon v-bind="{name: 'close.svg', type: 'dark', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input is-small" v-model="search" style="width: 250px;" type="text" placeholder="Tìm kiếm" @keyup="beginSearch">
|
||||
</div>
|
||||
<div class="control">
|
||||
<span class="is-clickable" @click="mode='image'">
|
||||
<SvgIcon v-bind="{name: 'image3.svg', type: 'dark', size: 25}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<span class="is-clickable" @click="mode='list'">
|
||||
<SvgIcon v-bind="{name: 'list.png', type: 'dark', size: 25}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DataView class="mt-3" v-bind="vbind" v-if="mode==='list'"></DataView>
|
||||
<div class="columns is-multiline mx-0" v-else>
|
||||
<div class="column is-2" v-for="k in data">
|
||||
<span class="tooltip">
|
||||
<nuxt-img :src="`${path}download?name=${k.file}`" :id="'commentImage' + k.id"></nuxt-img>
|
||||
<span class="tooltiptext">{{ k.name }}</span>
|
||||
</span>
|
||||
<div>
|
||||
<a class="mr-4" @click="selectMedia(k)">
|
||||
<SvgIcon v-bind="{name: 'checked.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-4" @click="copyMedia(k, 'image')">
|
||||
<SvgIcon v-bind="{name: 'copy.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-4" @click="copyMedia(k, 'image')">
|
||||
<SvgIcon v-bind="{name: 'download1.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-4" @click="editImage(k)">
|
||||
<SvgIcon v-bind="{name: 'crop.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="deleteMedia(k, 'file')">
|
||||
<SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" @image="updateImage" @files="getFiles" v-if="showmodal"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useStore } from '~/stores/index'
|
||||
export default {
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return {store}
|
||||
},
|
||||
props: ['source'],
|
||||
data() {
|
||||
return {
|
||||
file: undefined,
|
||||
image: undefined,
|
||||
showmodal: undefined,
|
||||
data: [],
|
||||
group: [],
|
||||
focus: undefined,
|
||||
type: 'image',
|
||||
selected: undefined,
|
||||
loading: false,
|
||||
path: this.$getpath(),
|
||||
showUrl: false,
|
||||
url: undefined,
|
||||
search: undefined,
|
||||
mode: 'image',
|
||||
timer: undefined,
|
||||
vbind: {api: 'file', setting: 'image-fields'},
|
||||
dataFiles: [],
|
||||
files: [],
|
||||
docid: this.$id()
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let found = this.$findapi('file')
|
||||
found.params = {filter: {user: this.login.id}, sort: '-create_time', type__code: this.type}
|
||||
let result = await this.$getapi([found])
|
||||
this.data = result[0].data.rows
|
||||
},
|
||||
watch: {
|
||||
data: function() {
|
||||
this.group = []
|
||||
for (let index = 0; index < this.data.length/ (this.type==='video'? 4 : 5) ; index++) {
|
||||
this.group.push(index)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
login: {
|
||||
get: function() {return this.store.login},
|
||||
set: function(val) {this.store.commit("login", val)}
|
||||
},
|
||||
media: {
|
||||
get: function() {return this.store.media},
|
||||
set: function(val) {this.store.commit("media", val)}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doChange() {
|
||||
this.dataFiles = []
|
||||
let fileList = document.getElementById(this.docid).files
|
||||
this.files = Array.from(fileList)
|
||||
if(this.files.length===0) return
|
||||
this.files.map(v=>{
|
||||
let file = this.$upload(v, this.vtype, this.store.login.id)
|
||||
this.dataFiles.push(file)
|
||||
})
|
||||
this.showmodal = {component: 'media/UploadProgress', title: 'Upload files', width: '700px', height: '200px', vbind: {files: this.dataFiles}}
|
||||
this.clearFileList()
|
||||
},
|
||||
clearFileList() {
|
||||
const fileInput = document.getElementById(this.docid)
|
||||
const dt = new DataTransfer()
|
||||
fileInput.files = dt.files
|
||||
},
|
||||
getFiles(files) {
|
||||
this.data = files.concat(this.data)
|
||||
setTimeout(()=>this.showmodal=undefined, 3000)
|
||||
},
|
||||
beginSearch(e) {
|
||||
if(this.timer) clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => this.startSearch(e.target.value), 150)
|
||||
},
|
||||
async startSearch(value) {
|
||||
let filter = {user: this.login.id}
|
||||
if(!this.$empty(value)) filter.name__icontains = value.toLowerCase()
|
||||
this.data = await this.$getdata('file', filter)
|
||||
},
|
||||
displayInput() {
|
||||
this.showUrl = true
|
||||
this.url = undefined
|
||||
setTimeout(()=>document.getElementById('url').focus(), 100)
|
||||
},
|
||||
checkUrl() {
|
||||
if(this.$empty(this.url)) return this.$snackbar(`Đường dẫn không hợp lệ`, undefined, 'Error')
|
||||
let self = this
|
||||
this.loading = true
|
||||
this.$axios.get(this.url, {responseType:"blob" })
|
||||
.then(function(response) {
|
||||
var reader = new window.FileReader()
|
||||
reader.onload = (e) => {
|
||||
self.image = e.target.result
|
||||
setTimeout(()=> self.doUpload(e.target.result), 100)
|
||||
}
|
||||
reader.readAsDataURL(response.data)
|
||||
self.loading = false
|
||||
})
|
||||
.catch(e => {
|
||||
self.$buefy.toast.open({duration: 3000, message: `Đường dẫn không hợp lệ`, type: 'is-danger'})
|
||||
self.loading = false
|
||||
})
|
||||
},
|
||||
doUpload() {
|
||||
const image = document.getElementById('image')
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = image.width
|
||||
canvas.height = image.height
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(image, 0, 0)
|
||||
if(canvas) canvas.toBlob(blod=>this.saveAs(blod))
|
||||
},
|
||||
async saveAs(blod) {
|
||||
var form = new FormData();
|
||||
const fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + '-' + this.$id() + '.png'
|
||||
form.append('filename', fileName)
|
||||
form.append('name', `${this.$id()}.png`)
|
||||
form.append('file', blod)
|
||||
form.append('type', 'image')
|
||||
form.append('size', 100)
|
||||
form.append('user', this.store.login.id)
|
||||
let result = await this.$insertapi('upload', form)
|
||||
if(result==='error') return
|
||||
this.updateImage(result.rows[0])
|
||||
this.showUrl = false
|
||||
},
|
||||
async uploadImage(file) {
|
||||
this.loading = true
|
||||
let result = await this.$insertapi('upload', file.form)
|
||||
this.data.splice(0, 0, result.rows[0])
|
||||
this.loading = false
|
||||
},
|
||||
getData(i) {
|
||||
if(this.type==='video') {
|
||||
var list = this.data.slice(i*5, i*5+5)
|
||||
for (let index = 0; index < 5; index++) {
|
||||
if(list.length<index+1) list.push({file: undefined})
|
||||
}
|
||||
} else {
|
||||
list = this.data.slice(i*6, i*6+6)
|
||||
for (let index = 0; index < 6; index++) {
|
||||
if(list.length<index+1) list.push({file: undefined})
|
||||
}
|
||||
}
|
||||
return list
|
||||
},
|
||||
selectMedia(v) {
|
||||
let copy = this.media? this.$copy(this.media) : {}
|
||||
copy.type = 'image'
|
||||
copy.open = false
|
||||
copy.select = v
|
||||
this.media = copy
|
||||
let row = this.$copy(v)
|
||||
if(this.source) {
|
||||
let params = {name: v.file, type: 'file'}
|
||||
this.$axios.get(`${this.path}download/`, {params: params, responseType:"blob" })
|
||||
.then(function (response) {
|
||||
var reader = new window.FileReader()
|
||||
reader.onload = (e) => {
|
||||
fetch(e.target.result)
|
||||
.then(res => res.blob())
|
||||
.then(blob => {
|
||||
const file = new File([blob], v.name,{ type: "image/png" })
|
||||
row.source = {file: file}
|
||||
})
|
||||
}
|
||||
reader.readAsDataURL(response.data)
|
||||
})
|
||||
}
|
||||
this.$emit('modalevent', {name: 'selectimage', data: row})
|
||||
},
|
||||
editImage(v) {
|
||||
this.loading = true
|
||||
this.selected = v
|
||||
let self = this
|
||||
let params = {name: v.file, type: 'file'}
|
||||
this.$axios.get(`${this.path}download/`, {params: params, responseType:"blob" })
|
||||
.then(function (response) {
|
||||
var reader = new window.FileReader()
|
||||
reader.onload = (e) => {
|
||||
self.image = e.target.result
|
||||
self.showmodal = {component: 'media/CropImage', width: '65%', title: 'Cắt hình ảnh', vbind: {selected: self.selected, image: self.image}}
|
||||
}
|
||||
reader.readAsDataURL(response.data)
|
||||
self.loading = false
|
||||
})
|
||||
},
|
||||
copyMedia(v) {
|
||||
this.$copyToClipboard(`${this.path}download/?name=${v.file}`)
|
||||
},
|
||||
deleteMedia(v, name) {
|
||||
let self = this
|
||||
var remove = async function() {
|
||||
let result = await self.$deleteapi(name, v.id)
|
||||
let idx = self.data.findIndex(x=>x.id===v.id)
|
||||
self.$delete(self.data, idx)
|
||||
}
|
||||
this.$buefy.dialog.confirm({
|
||||
message: 'Bạn muốn xóa file: ' + v.file,
|
||||
onConfirm: () => remove()})
|
||||
},
|
||||
updateImage(v) {
|
||||
this.data.splice(0, 0, v)
|
||||
this.showmodal = undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
components/media/Picture.vue
Normal file
54
components/media/Picture.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="image-container" v-if="picture">
|
||||
<img :src="picture" style="max-height: 250px !important;">
|
||||
<div class="image-label">
|
||||
<span class="is-clickable" @click="remove()">
|
||||
<SvgIcon v-bind="{name: 'bin.svg', type: 'danger', size: 30}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 130px; border-style: dashed; border-width: 1px;" v-else>
|
||||
<a @click="openImage()"><SvgIcon v-bind="{name: 'image.svg', type: 'grey', size: 120}"></SvgIcon></a>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a @click="openCamera()">
|
||||
<SvgIcon v-bind="{name: 'camera.svg', type: 'dark', size: 28}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @selectimage="selectImage"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['file', 'image', 'show'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
display: this.show || [],
|
||||
picture: this.image || undefined,
|
||||
vfile: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openImage() {
|
||||
this.showmodal = {component:'media/Imagebox', title: 'Thư viện hình ảnh', width: '90%', vbind: {source: true}}
|
||||
},
|
||||
selectImage(files) {
|
||||
this.showmodal = undefined
|
||||
let v = files
|
||||
this.picture = `${this.$path()}download/?name=${v.file__file || v.file}&type=file`
|
||||
v.image = this.$copy(this.picture)
|
||||
this.vfile = v
|
||||
this.$emit('picture', v)
|
||||
},
|
||||
remove() {
|
||||
this.vfile = undefined
|
||||
this.picture = undefined
|
||||
},
|
||||
openCamera() {
|
||||
this.showmodal = {component:'media/Camera', title: 'Chụp ảnh', width: '650px'}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
components/media/UploadProgress.vue
Normal file
57
components/media/UploadProgress.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="has-text-left">
|
||||
<p class="py-1 border-bottom" v-for="v in vfiles">
|
||||
<span class="icon-text">
|
||||
<span class="mr-5">{{ v.name }}</span>
|
||||
<SvgIcon v-bind="{name: 'check2.svg', type: 'primary', size: 22}" v-if="v.status==='success'"></SvgIcon>
|
||||
<SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 22}" v-else-if="v.status==='error'"></SvgIcon>
|
||||
</span>
|
||||
<span class="icon-text has-text-danger ml-6" v-if="v.error">
|
||||
<SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 22}"></SvgIcon>
|
||||
<span class="ml-1">{{ v.text }}</span>
|
||||
</span>
|
||||
<button class="button is-small is-primary is-loading px-0 ml-4" v-if="v.status==='uploading'">Loading</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['files'],
|
||||
data() {
|
||||
return {
|
||||
vfiles: this.$copy(this.files),
|
||||
data: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let found = this.$find(this.vfiles, {error: true})
|
||||
if(!found) this.upload()
|
||||
},
|
||||
methods: {
|
||||
async doUpload(v, i) {
|
||||
let file = this.files[i]
|
||||
let rs = await this.$insertapi('upload', file.form, undefined, false)
|
||||
v.status = rs==='error'? 'error' : 'success'
|
||||
this.vfiles[i] = v
|
||||
let obj = rs.rows[0]
|
||||
obj.source = file
|
||||
this.data.push(obj)
|
||||
this.checkDone()
|
||||
},
|
||||
async upload() {
|
||||
this.vfiles.map((v,i)=>{
|
||||
v.status = 'uploading'
|
||||
this.vfiles[i] = v
|
||||
this.doUpload(v, i)
|
||||
})
|
||||
},
|
||||
checkDone() {
|
||||
let found = this.vfiles.find(v=>!v.status || v.status==='uploading')
|
||||
if(!found) {
|
||||
this.$emit('files', this.data)
|
||||
this.$emit('modalevent', {name: 'files', data: this.data})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
12
components/media/YoutubeVideo.vue
Normal file
12
components/media/YoutubeVideo.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="columns mx--0">
|
||||
<div class="column is-10">
|
||||
<iframe width="100%" height="600px" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
36
components/menu/MarkData.vue
Normal file
36
components/menu/MarkData.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>{{maskLoanAndAmountByKeyword(row.content)}}</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
function maskLoanAndAmountByKeyword(str) {
|
||||
// Che mã đơn vay sau từ "đơn vay"
|
||||
let result = str.replace(/(đơn vay\s+)([A-Z]{2})(\d+)(\d{3})/gi, (m, prefix, letters, middle, last3) => {
|
||||
return prefix + letters + '*'.repeat(middle.length) + last3;
|
||||
});
|
||||
|
||||
// Che mã đơn vay sau từ "khoản vay"
|
||||
result = result.replace(/(khoản vay\s+)([A-Z]{2})(\d+)(\d{3})/gi, (m, prefix, letters, middle, last3) => {
|
||||
return prefix + letters + '*'.repeat(middle.length) + last3;
|
||||
});
|
||||
|
||||
// Che số tiền sau từ "số tiền"
|
||||
result = result.replace(/(số tiền\s+)(\d{1,3}(?:,\d{3})*)/gi, (m, prefix, amount) => {
|
||||
const digits = amount.replace(/,/g, '');
|
||||
if (digits.length <= 3) return prefix + amount;
|
||||
const masked = '*'.repeat(digits.length - 3) + digits.slice(-3);
|
||||
|
||||
// thêm lại dấu phẩy từ phải sang
|
||||
const parts = [];
|
||||
for (let i = masked.length; i > 0; i -= 3) {
|
||||
const start = Math.max(0, i - 3);
|
||||
parts.unshift(masked.slice(start, i));
|
||||
}
|
||||
return prefix + parts.join(',');
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
14
components/menu/MenuAction.vue
Normal file
14
components/menu/MenuAction.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<a class="mr-3" @click="$emit('edit')">
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'dark', size: 16}"></SvgIcon>
|
||||
</a>
|
||||
<a @click="remove()">
|
||||
<SvgIcon v-bind="{name: 'bin1.svg', type: 'dark', size: 16}"></SvgIcon>
|
||||
</a>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(['edit', 'remove'])
|
||||
const remove = function() {
|
||||
emit('remove')
|
||||
}
|
||||
</script>
|
||||
11
components/menu/MenuAdd.vue
Normal file
11
components/menu/MenuAdd.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<span class="tooltip">
|
||||
<span class="dot-twitter">+</span>
|
||||
<span class="tooltiptext to-left" style="min-width: max-content;">{{ label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['label']
|
||||
}
|
||||
</script>
|
||||
15
components/menu/MenuCV.vue
Normal file
15
components/menu/MenuCV.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<a class="has-text-link" @click="open">{{row['code']}}</a>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "~/stores/index";
|
||||
const store = useStore();
|
||||
const emit = defineEmits(["clickevent"])
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
function open() {
|
||||
emit('clickevent', {name: 'dataevent', data: {modal: {title: store.lang==='en'? 'Candidate' : 'Hồ sơ ứng viên',
|
||||
height: '400px', width: '65%', component: 'common/JobView', vbind:{row: props.row}}}})
|
||||
}
|
||||
</script>
|
||||
43
components/menu/MenuCheck.vue
Normal file
43
components/menu/MenuCheck.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="mx-2">
|
||||
<a @click="change()">
|
||||
<SvgIcon v-bind="{name: check? 'checked.svg' : 'uncheck.svg', type: check? 'blue' : 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-5" @click="userRights" v-if="api && check">
|
||||
<SvgIcon v-bind="{name: 'list.svg', type: check? 'blue' : 'gray', size: 20}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $insertapi, $deleteapi, $store } = useNuxtApp()
|
||||
const emit = defineEmits(["clickevent"])
|
||||
var props = defineProps({
|
||||
appid: Number,
|
||||
row: Object,
|
||||
api: String,
|
||||
setting: String
|
||||
})
|
||||
var check = ref(false)
|
||||
var current
|
||||
if(props.row) {
|
||||
props.row.apps.map(v=>{
|
||||
if(v.userapps__apps==props.appid) {
|
||||
check.value = true
|
||||
current = v
|
||||
}
|
||||
})
|
||||
}
|
||||
async function change() {
|
||||
if(check.value) {
|
||||
await $deleteapi('userapps', current.userapps__id)
|
||||
} else {
|
||||
let obj = {user: props.row.id, apps: props.appid}
|
||||
await $insertapi('userapps', obj)
|
||||
}
|
||||
check.value = !check.value
|
||||
}
|
||||
function userRights() {
|
||||
emit('clickevent', {name: 'dataevent', data: {modal: {title: $store.lang==='en'? 'User rights' : 'Phân quyền',
|
||||
height: '500px', width: '500px', component: 'menu/MenuRights', vbind: {row: props.row, api: props.api, setting: props.setting}}}})
|
||||
}
|
||||
</script>
|
||||
15
components/menu/MenuCollab.vue
Normal file
15
components/menu/MenuCollab.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<a class="has-text-link" @click="open">{{row['code']}}</a>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "~/stores/index";
|
||||
const store = useStore();
|
||||
const emit = defineEmits(["clickevent"])
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
function open() {
|
||||
emit('clickevent', {name: 'dataevent', data: {modal: {title: store.lang==='en'? 'Collaborator' : 'Cộng tác viên',
|
||||
height: '500px', width: '65%', component: 'collaborator/Collaborator', vbind:{row: props.row}}}})
|
||||
}
|
||||
</script>
|
||||
23
components/menu/MenuDocker.vue
Normal file
23
components/menu/MenuDocker.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<a @click="stop()">
|
||||
<SvgIcon v-bind="{name: 'stop.svg', type: 'gray', size: 20}"></SvgIcon>
|
||||
</a>
|
||||
<a class="ml-3" @click="start()">
|
||||
<SvgIcon v-bind="{name: 'play.svg', type: 'gray', size: 20}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['row'],
|
||||
methods: {
|
||||
stop() {
|
||||
this.$emit('clickevent', {name: 'dataevent', data: 'stop'})
|
||||
},
|
||||
start() {
|
||||
this.$emit('clickevent', {name: 'dataevent', data: 'start'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
17
components/menu/MenuParam.vue
Normal file
17
components/menu/MenuParam.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<span :style="style">{{row[column]}}</span>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
const emit = defineEmits(["clickevent"])
|
||||
const props = defineProps({
|
||||
row: Object,
|
||||
field: String,
|
||||
column: String,
|
||||
param: String
|
||||
})
|
||||
const params = store[props.param]
|
||||
const found = params.find(v=>props.row[props.field]===v.id)
|
||||
const style = found? `color:${found.color}` : undefined
|
||||
</script>
|
||||
13
components/menu/MenuPhone.vue
Normal file
13
components/menu/MenuPhone.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<a class="has-text-link" @click="open">{{row['phone']}}</a>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits(["clickevent"])
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
function open() {
|
||||
emit('clickevent', {name: 'dataevent', data:
|
||||
{modal: {title: 'Phone', height: '180px', width: '400px', component: 'common/Phone'}}})
|
||||
}
|
||||
</script>
|
||||
118
components/menu/MenuRights.vue
Normal file
118
components/menu/MenuRights.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="has-text-black">
|
||||
<div>{{ row.username }} / {{ row.fullname }} {{$lang('access-right')}}:</div>
|
||||
<div class="mt-2">
|
||||
<span class="icon-text mr-6" v-for="v in options">
|
||||
<a @click="changeOption(v)">
|
||||
<SvgIcon v-bind="{name: option===v.code? 'radio-checked.svg' : 'radio-unchecked.svg', type: option===v.code? 'blue' : 'gray', size: 25}" />
|
||||
</a>
|
||||
<b class="fs-18">{{v[$store.lang==='en'? 'en' : 'name']}}</b>
|
||||
</span>
|
||||
</div>
|
||||
<aside class="menu">
|
||||
<ul class="menu-list" v-for="v in topmenu">
|
||||
<li>
|
||||
<div class="field is-grouped has-background-light has-text-black py-2 px-3">
|
||||
<div class="control is-expanded"><b>{{ v[$store.lang] }}</b></div>
|
||||
<div class="control" v-if="v.submenu.length===0 && option==='limit'">
|
||||
<span class="ml-6 is-clickable" @click="changeTick(v)">
|
||||
<SvgIcon v-bind="{name: v.checked? 'checked.svg' : 'uncheck.svg', type: v.checked? 'blue' : 'gray', size: 25}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="border-bottom" v-for="x in v.submenu">
|
||||
<div class="field is-grouped py-1">
|
||||
<div class="control is-expanded">
|
||||
<span class="icon-text">
|
||||
<span>{{ x[$store.lang] }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control" v-if="option==='limit'">
|
||||
<span class="ml-6 is-clickable" @click="changeTick(x, v)">
|
||||
<SvgIcon v-bind="{name: x.checked? 'checked.svg' : 'uncheck.svg', type: x.checked? 'blue' : 'gray', size: 25}"></SvgIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const { $copy, $getdata, $filter, $find, $insertapi, $deleteapi } = useNuxtApp()
|
||||
const props = defineProps({
|
||||
row: Object,
|
||||
api: String,
|
||||
setting: String
|
||||
})
|
||||
const options = [{code: 'all', name: 'Tất cả tính năng', en: 'All functions'}, {code: 'limit', name: 'Bị giới hạn', en: 'Limited functions'}]
|
||||
var option = ref('limit')
|
||||
const rows = await $getdata(props.setting, {category__in: ['topmenu', 'submenu']})
|
||||
var topmenu = ref([])
|
||||
var loanRights = []
|
||||
async function getRights(first) {
|
||||
loanRights = await $getdata(props.api, {user: props.row.id})
|
||||
if(loanRights.length==0 && first) option.value = 'all'
|
||||
var rights = $filter(rows, {category: 'topmenu'})
|
||||
rights.map(v=>{
|
||||
let arr = $filter(rows, {category: 'submenu', classify: v.code})
|
||||
arr.map(x=>{
|
||||
let found = $find(loanRights, {setting: x.id})
|
||||
if(found) {
|
||||
x.rightId = found.id
|
||||
x.checked = true
|
||||
}
|
||||
})
|
||||
let found = $find(loanRights, {setting: v.id})
|
||||
if(found) v.rightId = found.id
|
||||
if(arr.length===0) {
|
||||
v.checked = found? true : false
|
||||
} else v.checked = true
|
||||
v.submenu = arr
|
||||
})
|
||||
topmenu.value = rights
|
||||
}
|
||||
async function changeTick(x, v) {
|
||||
if(x.checked) {
|
||||
if(x.rightId) {
|
||||
await $deleteapi(props.api, x.rightId)
|
||||
x.rightId = null
|
||||
}
|
||||
x.checked = false
|
||||
if(v? v.rightId>0 : false) {
|
||||
let idx = v.submenu.findIndex(h=>h.checked)
|
||||
if(idx<0) {
|
||||
await $deleteapi(props.api, v.rightId)
|
||||
v.checked = false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let obj = await $insertapi(props.api, {setting: x.id, user: props.row.id}, undefined, false)
|
||||
if(obj) {
|
||||
x.checked = true
|
||||
x.rightId = obj.id
|
||||
}
|
||||
x.checked = true
|
||||
if(v? !v.rightId : false) {
|
||||
let obj = await $insertapi(props.api, {setting: v.id, user: props.row.id}, undefined, false)
|
||||
if(obj) {
|
||||
v.rightId = obj.rightId
|
||||
v.checked = true
|
||||
}
|
||||
}
|
||||
}
|
||||
topmenu.value = $copy(topmenu.value)
|
||||
}
|
||||
async function changeOption(v) {
|
||||
option.value = v.code
|
||||
if(v.code==='all') {
|
||||
if(loanRights.length>0) await $deleteapi(props.api, loanRights)
|
||||
} else {
|
||||
await getRights()
|
||||
}
|
||||
}
|
||||
await getRights(true)
|
||||
</script>
|
||||
15
components/menu/MenuStaff.vue
Normal file
15
components/menu/MenuStaff.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<a class="has-text-link" @click="open">{{row['code']}}</a>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useStore } from "~/stores/index";
|
||||
const store = useStore();
|
||||
const emit = defineEmits(["clickevent"])
|
||||
const props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
function open() {
|
||||
emit('clickevent', {name: 'dataevent', data: {modal: {title: store.lang==='en'? 'Staff' : 'Hồ sơ nhân viên',
|
||||
height: '400px', width: '70%', component: 'staff/Staff', vbind:{row: props.row}}}})
|
||||
}
|
||||
</script>
|
||||
13
components/menu/MenuUser.vue
Normal file
13
components/menu/MenuUser.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<a v-if="row.user__username">{{row.user__username.toUpperCase()}}</a>
|
||||
<a v-else-if="row.status__code==='yes'"
|
||||
@click="$emit('clickevent', {name: 'dataevent', data: {modal: {title: 'Tạo tài khoản', height: '400px', width: '800px',
|
||||
component: 'user/NewUser', vbind:{row:row, isadd: 1, type: 3}}}})">
|
||||
<MenuAdd v-bind="{label: 'Tạo tài khoản đăng nhập'}"/>
|
||||
</a>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
row: Object
|
||||
})
|
||||
</script>
|
||||
97
components/parameter/Apps.vue
Normal file
97
components/parameter/Apps.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Tham số'}"></Caption>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<label class="label">Mã <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.code">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Tên <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.name">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field is-narrow">
|
||||
<label class="label">Thứ tự <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.index">
|
||||
</p>
|
||||
<p class="help is-danger" v-if="errors.index">{{ errors.index }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label">Logo<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.logo">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Link<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.link">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field pl-5">
|
||||
<label class="label">Trạng thái<span class="has-text-danger"> * </span> </label>
|
||||
<span class="mr-4" v-for="(v,i) in option">
|
||||
<a class="icon-text" @click="radio=v">
|
||||
<SvgIcon v-bind="{name: `radio-${radio.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
|
||||
<span :class="v.code===1? 'has-text-primary' : 'has-text-danger'">{{ v.name }}</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<label class="label">Mô tả<span class="has-text-danger"> * </span> </label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.detail">
|
||||
</div>
|
||||
<div class="mt-5 pt-2">
|
||||
<button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
|
||||
<a class="button is-dark has-text-white ml-5" @click="update(true)" v-if="record.id">Tạo mới</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['api', 'pagename', 'row'],
|
||||
data () {
|
||||
return {
|
||||
record: this.$copy(this.row || {}),
|
||||
errors: {},
|
||||
option: [{code: 0, name: 'Not Active'}, {code: 1, name: 'Active'}],
|
||||
radio: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(!this.row) return
|
||||
this.radio = this.row.active? this.option[1] : this.option[0]
|
||||
},
|
||||
computed: {
|
||||
pagedata: {
|
||||
get: function() {return this.$store.state[this.pagename]},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
|
||||
}
|
||||
},
|
||||
methods :{
|
||||
async update(isNew) {
|
||||
let data = this.$resetNull(this.record)
|
||||
if(isNew) delete data.id
|
||||
data.active = this.radio.code
|
||||
if(data.id) await this.$updaterow(this.api, data, undefined, this.pagename)
|
||||
else await this.$insertrow(this.api, data, undefined, this.pagename)
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
components/parameter/CodeName.vue
Normal file
59
components/parameter/CodeName.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Parameter', type: 'has-text-warning'}"></Caption>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<label class="label">Code <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.code" id="code">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Name (VI) <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.name">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">EN <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.en">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<label class="label">Thứ tự <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.index">
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button class="button is-primary has-text-white" @click="update()">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
const { $copy, $resetNull, $insertrow, $updaterow, $snackbar} = useNuxtApp()
|
||||
var props = defineProps({
|
||||
api: String,
|
||||
pagename: String,
|
||||
row: Object,
|
||||
prefix: String
|
||||
})
|
||||
const emit = defineEmits(['close', 'modalevent'])
|
||||
var record = $copy( props.row || {})
|
||||
async function update() {
|
||||
let data = $resetNull(record)
|
||||
let rs = data.id? await $updaterow(props.api, data, undefined, props.pagename)
|
||||
: await $insertrow(props.api, data, undefined, props.pagename)
|
||||
if(rs==='error') return $snackbar(rs)
|
||||
emit('modalevent', {name: 'dataevent', data: rs})
|
||||
emit('close')
|
||||
}
|
||||
onMounted(()=> {
|
||||
document.getElementById('code').focus()
|
||||
})
|
||||
</script>
|
||||
188
components/parameter/Common.vue
Executable file
188
components/parameter/Common.vue
Executable file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="columns is-multiline is-mobile mx-0">
|
||||
<div class="column is-1">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">ID<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.id" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Phân loại<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.category">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Phân lớp<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.classify">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Mã<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.code">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Thứ tự</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.index">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<label class="label has-text-left">VI<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<textarea class="textarea" placeholder="" rows="3" v-model="record.vi"></textarea>
|
||||
</div>
|
||||
<div class="control ml-5">
|
||||
<a @click="openEditor()">
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<label class="label has-text-left">EN<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<textarea class="textarea" placeholder="" rows="3" v-model="record.en"></textarea>
|
||||
</div>
|
||||
<div class="control ml-5">
|
||||
<a @click="openEditor()">
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 22}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Image</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Link</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.link">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<label class="label has-text-left">Detail</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.detail">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editDetail('detail')">
|
||||
<span>
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 17}"></SvgIcon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="copyDetail('detail')">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="pasteDetail('detail')">
|
||||
Paste
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<label class="label has-text-left">Detail EN</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.detail_en">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="editDetail('detail_en')">
|
||||
<span>
|
||||
<SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 17}"></SvgIcon>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="copyDetail('detail_en')">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button" @click="pasteDetail('detail_en')">
|
||||
Paste
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12 pt-5">
|
||||
<a class="button is-primary has-text-white" @click="updateData()">Lưu lại</a>
|
||||
<a class="button is-dark has-text-white ml-5" @click="updateData(true)" v-if="record.id">Tạo mới</a>
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" @texteditor="updateText" @update="updateAttr" v-if="showmodal"></Modal>
|
||||
</template>
|
||||
<script setup>
|
||||
const emit = defineEmits([])
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
row: Object,
|
||||
api: String
|
||||
})
|
||||
const { $copy, $resetNull, $insertrow, $updaterow, $copyToClipboard, $empty } = useNuxtApp()
|
||||
var record = ref(props.row? $copy(props.row) : {})
|
||||
var showmodal = ref()
|
||||
var vapi = props.api
|
||||
var current
|
||||
var updateText = function(content) {
|
||||
record.value.vi = content
|
||||
}
|
||||
var openEditor = function() {
|
||||
showmodal.value = {component: 'common/TextEditor', vbind: {content: record.value.vi}, title: 'Text editor', width: '40%', height: '150px'}
|
||||
}
|
||||
var editDetail = function(attr) {
|
||||
current = attr
|
||||
let detail = record.value[attr]? record.value[attr] : {}
|
||||
showmodal.value = {component: 'datatable/FieldAttribute', vbind: {field: detail, close: true},
|
||||
title: 'Change attributes', width: '40%', height: '150px'}
|
||||
}
|
||||
var updateAttr = function(detail) {
|
||||
record.value[current] = detail
|
||||
}
|
||||
function copyDetail(attr) {
|
||||
if($empty(record.value[attr])) return
|
||||
let val = typeof record.value[attr]=='string'? record.value[attr] : JSON.stringify(record.value[attr])
|
||||
$copyToClipboard(val)
|
||||
}
|
||||
async function pasteDetail(attr) {
|
||||
let text = await navigator.clipboard.readText()
|
||||
if($empty(text)) return
|
||||
record.value[attr] = JSON.parse(text)
|
||||
}
|
||||
var updateData = async function(isNew) {
|
||||
let ele = record.value
|
||||
if(ele.create_time===null) ele.create_time = new Date()
|
||||
ele = $resetNull(ele)
|
||||
if(isNew) delete ele.id
|
||||
let result = ele.id? await $updaterow(vapi, ele, undefined, props.pagename)
|
||||
: await $insertrow(vapi, ele, undefined, props.pagename)
|
||||
if(isNew) emit('close')
|
||||
}
|
||||
</script>
|
||||
82
components/parameter/DataSetting.vue
Executable file
82
components/parameter/DataSetting.vue
Executable file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<DataTable v-bind="{pagename: pagename}" @updatesetting="updateSetting" v-if="docid" />
|
||||
<div class="mt-6">
|
||||
<Caption v-bind="{title: 'Nhập tên trong trường hợp tạo mới'}"></Caption>
|
||||
<div>
|
||||
<input class="input" type="text" v-model="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button class="button is-primary" @click="save()">Cập nhật</button>
|
||||
<button class="button is-dark ml-4" @click="save(true)">Tạo mới</button>
|
||||
<button class="button is-dark ml-4" @click="copy()">Copy fields</button>
|
||||
<button class="button is-dark ml-4" @click="paste()">Paste fields</button>
|
||||
<button class="button is-danger ml-6" @click="remove()">Xóa</button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DataTable from '~/components/datatable/DataTable'
|
||||
import { ref } from 'vue'
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
const { $id, $copy, $updaterow, $insertrow, $findpage, $getpage, $getdata, $setpage } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
setting: Object,
|
||||
masterpage: String
|
||||
})
|
||||
var api = 'usersetting'
|
||||
var pagename = $findpage()
|
||||
var name = undefined
|
||||
var vsetting = undefined
|
||||
var pagedata = undefined
|
||||
var docid = ref(null)
|
||||
async function initData() {
|
||||
pagedata = $getpage()
|
||||
store.commit(pagename, pagedata)
|
||||
vsetting = await $getdata(api, undefined, {filter: JSON.stringify({id: props.setting.id})}, true)
|
||||
pagedata = $setpage(pagename, vsetting)
|
||||
docid.value = $id()
|
||||
console.log(pagename, pagedata)
|
||||
}
|
||||
async function paste() {
|
||||
const text = await navigator.clipboard.readText()
|
||||
try {
|
||||
const json = JSON.parse(text)
|
||||
//$store.commit("updateState", {name: pagename, key: "update", data: {fields: json}})
|
||||
}
|
||||
catch(err) {
|
||||
$snackbar('Đã xảy lỗi. Hãy thử lại.')
|
||||
}
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(pagedata.fields))
|
||||
$snackbar('Copy thành công')
|
||||
}
|
||||
function updateSetting(data) {
|
||||
let rows = store[masterpage].data
|
||||
let idx = $findIndex(rows, {id: data.id})
|
||||
rows[idx] = data
|
||||
//$store.commit("updateState", {name: masterpage, key: "update", data: {data: rows}})
|
||||
}
|
||||
async function save(isNew) {
|
||||
let detail = pagename? {fields: pagedata.fields} : {}
|
||||
let element = pagedata.tablesetting || tablesetting
|
||||
detail.tablesetting = element
|
||||
if (pagedata.filters? pagedata.filters.length > 0 : false) {
|
||||
detail.filters = pagedata.filters;
|
||||
}
|
||||
let copy = await $getdata(api, undefined, {filter: {id: setting.id}}, true)
|
||||
copy.detail = detail
|
||||
copy.update_time = new Date()
|
||||
if(isNew) {
|
||||
copy.id = undefined
|
||||
copy.name = name
|
||||
}
|
||||
isNew? await $insertrow(api, copy, undefined, pagename) : await $updaterow(api, copy, undefined, pagename)
|
||||
}
|
||||
async function remove() {
|
||||
await $deleterow(api, props.setting.id, undefined, pagename)
|
||||
}
|
||||
// main
|
||||
initData()
|
||||
</script>
|
||||
89
components/parameter/EmailSetup.vue
Normal file
89
components/parameter/EmailSetup.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Email <span class="has-text-danger">*</span></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.email">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt15">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Password <span class="has-text-danger">*</span></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.password">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt15">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Smtp <span class="has-text-danger">*</span></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.smtp">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Port <span class="has-text-danger">*</span></label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.port">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped mt-5 pt-3">
|
||||
<div class="control mr-3">
|
||||
<button class="button is-primary has-text-white" @click="update()">
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button :class="`button is-dark ${loading? 'is-loading' : ''}`" @click="test()">
|
||||
Send test
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['pagename', 'row'],
|
||||
data () {
|
||||
return {
|
||||
record: this.row? this.$copy(this.row) : {},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods :{
|
||||
async update() {
|
||||
let data = this.$resetNull(this.record)
|
||||
if(data.id) await this.$updaterow('emailsetup', data, undefined, this.pagename)
|
||||
else await this.$insertrow('emailsetup', data, undefined, this.pagename)
|
||||
this.$emit('close')
|
||||
},
|
||||
async test() {
|
||||
this.loading = true
|
||||
let data = {subject: 'hello', to: 'loitx@outlook.com', sender: 1, content: 'Test'}
|
||||
let rs = await this.$insertapi('sendemail', data)
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
components/parameter/NameDetail.vue
Normal file
62
components/parameter/NameDetail.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Tham số'}"></Caption>
|
||||
<div class="field is-horizontal mt-5">
|
||||
<div class="field-body">
|
||||
<div class="field is-narrow">
|
||||
<label class="label">Mã <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.code">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Tên <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.name">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<label class="label">Chi tiết<span class="has-text-danger"> * </span> </label>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="record.detail">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field mt-5">
|
||||
<label class="label">Thứ tự <span class="has-text-danger"> * </span> </label>
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="" v-model="record.index">
|
||||
</p>
|
||||
<p class="help is-danger" v-if="errors.index">{{ errors.index }}</p>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button class="button is-primary" @click="update()">Cập nhật</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['api', 'pagename', 'row'],
|
||||
data () {
|
||||
return {
|
||||
record: this.$copy(this.row || {}),
|
||||
errors: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pagedata: {
|
||||
get: function() {return this.$store.state[this.pagename]},
|
||||
set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
|
||||
}
|
||||
},
|
||||
methods :{
|
||||
async update() {
|
||||
let data = this.$resetNull(this.record)
|
||||
if(data.id) await this.$updaterow(this.api, data, undefined, this.pagename)
|
||||
else await this.$insertrow(this.api, data, undefined, this.pagename)
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
82
components/parameter/SettingFields.vue
Normal file
82
components/parameter/SettingFields.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<DataTable v-bind="{pagename: pagename}" @updatesetting="updateSetting" v-if="docid" />
|
||||
<div class="mt-6">
|
||||
<Caption v-bind="{title: 'Nhập tên trong trường hợp tạo mới'}"></Caption>
|
||||
<div>
|
||||
<input class="input" type="text" v-model="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button class="button is-primary has-text-white" @click="save()">Cập nhật</button>
|
||||
<button class="button is-dark ml-4" @click="save(true)">Tạo mới</button>
|
||||
<button class="button is-dark ml-4" @click="copy()">Copy fields</button>
|
||||
<button class="button is-dark ml-4" @click="paste()">Paste fields</button>
|
||||
<button class="button is-danger has-text-white ml-4" @click="remove()">Xóa</button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DataTable from '~/components/datatable/DataTable'
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
const { $id, $clone, $updateapi, $insertapi, $findpage, $getpage, $getdata, $setpage, $deleterow, $snackbar, $copyToClipboard } = useNuxtApp()
|
||||
var props = defineProps({
|
||||
setting: Object,
|
||||
masterpage: String
|
||||
})
|
||||
var api = 'usersetting'
|
||||
var pagename = $findpage()
|
||||
var name = undefined
|
||||
var vsetting = undefined
|
||||
var pagedata = undefined
|
||||
var docid = ref(null)
|
||||
async function initData() {
|
||||
pagedata = $getpage()
|
||||
store.commit(pagename, pagedata)
|
||||
vsetting = await $getdata(api, {id: props.setting.id}, null, true)
|
||||
pagedata = $setpage(pagename, vsetting)
|
||||
docid.value = $id()
|
||||
}
|
||||
async function paste() {
|
||||
const text = await navigator.clipboard.readText()
|
||||
try {
|
||||
let copy = $clone(pagedata)
|
||||
copy.fields = JSON.parse(text)
|
||||
copy.update = {fields: JSON.parse(text)}
|
||||
store.commit(pagename, copy)
|
||||
}
|
||||
catch(err) {
|
||||
$snackbar('Đã xảy lỗi. Hãy thử lại.')
|
||||
}
|
||||
}
|
||||
function copy() {
|
||||
$copyToClipboard(JSON.stringify(pagedata.fields))
|
||||
$snackbar('Copy thành công')
|
||||
}
|
||||
function updateSetting(data) {
|
||||
let rows = store[masterpage].data
|
||||
let idx = $findIndex(rows, {id: data.id})
|
||||
rows[idx] = data
|
||||
//$store.commit("updateState", {name: masterpage, key: "update", data: {data: rows}})
|
||||
}
|
||||
async function save(isNew) {
|
||||
let detail = pagename? {fields: store[pagename].fields} : {}
|
||||
let element = pagedata.tablesetting || tablesetting
|
||||
detail.tablesetting = element
|
||||
if (pagedata.filters? pagedata.filters.length > 0 : false) {
|
||||
detail.filters = pagedata.filters;
|
||||
}
|
||||
let copy = await $getdata(api, undefined, {filter: {id: props.setting.id}}, true)
|
||||
copy.detail = detail
|
||||
copy.update_time = new Date()
|
||||
if(isNew) {
|
||||
copy.id = undefined
|
||||
copy.name = name
|
||||
}
|
||||
isNew? await $insertapi(api, copy, undefined, true) : await $updateapi(api, copy, undefined, true)
|
||||
}
|
||||
async function remove() {
|
||||
await $deleterow(api, props.setting.id, undefined, pagename)
|
||||
}
|
||||
// main
|
||||
initData()
|
||||
</script>
|
||||
59
components/server/ContainerMgnt.vue
Normal file
59
components/server/ContainerMgnt.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline mx-0" v-if="data">
|
||||
<div class="column is-12" v-for="v in data">
|
||||
<div>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<span class="icon-text has-text-warning">
|
||||
<span class="fsb-20">{{ v.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="ml-4" @click="refresh(v)">
|
||||
<SvgIcon v-bind="{name: 'refresh.svg', type: 'findata', size: 17}"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DockerContainer class="mt-2" :ref="`c${v.id}`" v-bind="{ssh: v.id, vpagename: v.vpagename}" />
|
||||
</div>
|
||||
</div>
|
||||
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DockerContainer from "@/components/server/DockerContainer"
|
||||
export default {
|
||||
components: {DockerContainer},
|
||||
data() {
|
||||
return {
|
||||
data: undefined,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let found = this.$findapi('ssh')
|
||||
let rs = await this.$getapi([found])
|
||||
this.data = this.$copy(rs[0].data.rows)
|
||||
this.data.map((v,i)=>{
|
||||
v.vpagename = `pagedata7.7.${i+1}`
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
refresh(v) {
|
||||
this.$refs[`c${v.id}`][0].getApi()
|
||||
},
|
||||
terminal(row) {
|
||||
this.showmodal = {component: 'docker/CheckStatus', title: 'Open SSH', vbind: { row: row}, height: '200px', width: '500px'}
|
||||
},
|
||||
command(row) {
|
||||
this.showmodal = {component: 'server/ExecuteCmd', title: 'Chạy câu lệnh', width: '50%', height: '600px', vbind: {sshid: row.id, path: '/home/stackops/'}}
|
||||
},
|
||||
ssh(v) {
|
||||
let cmd = `sshpass -p "${v.password}" ssh -p ${v.port} ${v.username}@${v.host}`
|
||||
this.$copyToClipboard(cmd)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
46
components/server/CpuRam.vue
Normal file
46
components/server/CpuRam.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<span class="tag is-medium is-light"><b class="fs-17 has-text-black">CPU: {{ cpuinfo }}</b></span>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-multiline mt-3 mb-1" v-if="data">
|
||||
<div class="control" v-for="vkey in Object.keys(data)">
|
||||
<div class="px-2 py-1" style="border: 1px solid #E8E8E8; border-radius: 6px;">
|
||||
<p class="has-text-grey">{{ vkey }}</p>
|
||||
<p>{{ data[vkey] }}</p>
|
||||
<p class="has-text-primary">{{ $formatUnit(data[vkey] / data.total, 0.01, 0, true, 0) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['ssh'],
|
||||
data() {
|
||||
return {
|
||||
data: undefined,
|
||||
cpuinfo: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getram()
|
||||
this.getcpu()
|
||||
},
|
||||
methods: {
|
||||
async getram() {
|
||||
let data = {ssh: this.ssh || 1, path: '', cmd: `free -m`, user: this.$store.login.id}
|
||||
let obj = await this.$insertapi('executecommand', data, undefined, false)
|
||||
let rows = obj.output[1].split(' ')
|
||||
let arr = rows.filter(v=>!this.$empty(v))
|
||||
this.data = {total: arr[1], used: arr[2], free: arr[3], shared: arr[4], cache: arr[5], avail: arr[6].replace('\r\n', '')}
|
||||
},
|
||||
async getcpu() {
|
||||
let data = {ssh: this.ssh || 1, path: '', cmd: `grep 'cpu ' /proc/stat | awk '{usage=($2+$4)*100/($2+$4+$5)} END {print usage "%"}'`, user: this.$store.login.id}
|
||||
let obj = await this.$insertapi('executecommand', data, undefined, false)
|
||||
let num = obj.output[0].replace('\r\n', '').replace('%', '')
|
||||
this.cpuinfo = this.$formatUnit(num, 1, 2, true, 2) + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
25
components/server/DiskInfo.vue
Normal file
25
components/server/DiskInfo.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<DataView v-bind="vbind" v-if="vbind"></DataView>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['ssh', 'vpagename'],
|
||||
data() {
|
||||
return {
|
||||
showmodal: undefined,
|
||||
vbind: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.getApi()
|
||||
},
|
||||
methods: {
|
||||
async getApi() {
|
||||
let data = {ssh: this.ssh || 1, path: '', cmd: `df -h`, format: 'diskinfo', user: this.$store.login.id}
|
||||
let rows = await this.$insertapi('executecommand', data, undefined, false)
|
||||
console.log('rows', rows)
|
||||
this.vbind = {pagename: this.vpagename, setting: 'diskinfo-fields', data: rows}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
54
components/server/DockerContainer.vue
Normal file
54
components/server/DockerContainer.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<DataView v-bind="vbind" v-if="vbind" @dataevent="dockerEvent"></DataView>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DataTable from "@/components/datatable/DataTable"
|
||||
export default {
|
||||
components: {DataTable},
|
||||
props: ['curtab', 'ssh', 'notitle', 'vpagename'],
|
||||
data() {
|
||||
return {
|
||||
vbind: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.getApi()
|
||||
},
|
||||
methods: {
|
||||
dockerEvent(row, field, event) {
|
||||
if(event==='stop') this.doAction(`docker stop ${row.Names}`)
|
||||
else if(event==='start') this.doAction(`docker restart ${row.Names}`)
|
||||
},
|
||||
async getApi() {
|
||||
let data = {ssh: this.ssh || 1, path: '', cmd: `docker container ps -a --format "{{json .}}"`, user: this.$store.login.id}
|
||||
let arr = (await this.$insertapi('executecommand', data, undefined, false))['output']
|
||||
let rows = arr.map(v=>JSON.parse(v))
|
||||
this.vbind = undefined
|
||||
setTimeout(()=>this.vbind = {pagename: this.vpagename, setting: 'container-fields', data: rows})
|
||||
},
|
||||
choiceSsh() {
|
||||
this.showmodal = {component: 'DataView', title: 'Chọn SSH', width: '40%', height: '400px',
|
||||
vbind: {api: 'ssh', setting: 'ssh-select', component: 'server/NewSsh'}}
|
||||
},
|
||||
async doAction(cmd) {
|
||||
console.log('doAction')
|
||||
let data = {ssh: this.ssh || 1, path: null, cmd: cmd, user: this.$store.login.id}
|
||||
let rs = (await this.$insertapi('executecommand', data, undefined, false))['output']
|
||||
if(rs==='error') return
|
||||
let obj = {ssh: this.ssh || 1, path: '', cmd: `docker container ps -a --format "{{json .}}"`, user: this.$store.login.id}
|
||||
rs = await this.$insertapi('executecommand', obj, undefined, false)
|
||||
let rows = rs.output.map(v=>JSON.parse(v))
|
||||
this.vbind = undefined
|
||||
setTimeout(() => this.vbind = {pagename: this.vpagename, setting: 'container-fields', data: rows})
|
||||
},
|
||||
async stop(row) {
|
||||
this.doAction(`docker stop ${row.Names}`)
|
||||
},
|
||||
async start(row) {
|
||||
this.doAction(`docker restart ${row.Names}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
36
components/server/ServerInfo.vue
Normal file
36
components/server/ServerInfo.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="columns is-multiline mx-0" v-if="data">
|
||||
<div class="column is-4" v-for="v in data">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<span class="icon-text has-text-warning">
|
||||
<span class="fsb-20">{{ v.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<CpuRam v-bind="{ssh: v.id}"></CpuRam>
|
||||
<DiskInfo class="mt-3" v-bind="{ssh: v.id, vpagename: v.vpagename}"></DiskInfo>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CpuRam from "@/components/server/CpuRam"
|
||||
import DiskInfo from "@/components/server/DiskInfo"
|
||||
export default {
|
||||
components: {CpuRam, DiskInfo},
|
||||
data() {
|
||||
return {
|
||||
data: undefined,
|
||||
showmodal: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let found = this.$findapi('ssh')
|
||||
let rs = await this.$getapi([found])
|
||||
this.data = this.$copy(rs[0].data.rows)
|
||||
this.data.map((v,i)=>{
|
||||
v.vpagename = `pagedata8.8.${i+1}`
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
components/snackbar/Error.vue
Normal file
21
components/snackbar/Error.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Lỗi', type: 'has-text-findata'}"></Caption>
|
||||
<div class="field is-grouped mb-0">
|
||||
<div class="control is-expanded pr-3" v-html="content"></div>
|
||||
<div class="control">
|
||||
<SvgIcon v-bind="{name: 'error.svg', type: 'danger', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
11
components/snackbar/Info.vue
Normal file
11
components/snackbar/Info.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<p v-html="props.content"></p>
|
||||
</template>
|
||||
<script setup>
|
||||
var props = defineProps({
|
||||
content: String
|
||||
})
|
||||
function cancel() {
|
||||
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
|
||||
}
|
||||
</script>
|
||||
60
components/snackbar/SnackBar.vue
Normal file
60
components/snackbar/SnackBar.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="show" style="max-width: 500px;">
|
||||
<component :is="dynamicComponent" v-bind="vbind" @close="$emit('close')"></component>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import { useStore } from '~/stores/index'
|
||||
const store = useStore()
|
||||
var props = defineProps({
|
||||
component: String,
|
||||
width: Number,
|
||||
height: Number,
|
||||
vbind: Object,
|
||||
title: String
|
||||
})
|
||||
const dynamicComponent = defineAsyncComponent(() => import(`~/components/snackbar/Info.vue`))
|
||||
setTimeout(()=>store.commit('snackbar', undefined), 3900)
|
||||
</script>
|
||||
<style>
|
||||
.show {
|
||||
min-width: 250px; /* Set a default minimum width */
|
||||
margin-left: -125px; /* Divide value of min-width by 2 */
|
||||
background-color: #303030; /* Black background color */
|
||||
color: white; /* White text color */
|
||||
text-align: left; /* Centered text */
|
||||
border-radius: 6px; /* Rounded borders */
|
||||
padding: 10px; /* Padding */
|
||||
position: fixed; /* Sit on top of the screen */
|
||||
z-index: 999; /* Add a z-index if needed */
|
||||
left: 50%; /* Center the snackbar */
|
||||
top: 50px; /* 50px from the top */
|
||||
visibility: visible; /* Show the snackbar */
|
||||
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
||||
However, delay the fade out process for 2.5 seconds */
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 3.5s;
|
||||
}
|
||||
|
||||
/* Animations to fade the snackbar in and out */
|
||||
@-webkit-keyframes fadein {
|
||||
from {top: 0; opacity: 0;}
|
||||
to {top: 50px; opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {top: 0; opacity: 0;}
|
||||
to {top: 50px; opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from {top: 50px; opacity: 1;}
|
||||
to {top: 0; opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {top: 50px; opacity: 1;}
|
||||
to {top: 0; opacity: 0;}
|
||||
}
|
||||
</style>
|
||||
21
components/snackbar/Success.vue
Normal file
21
components/snackbar/Success.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: $stripHtml(title) || 'Thành công', type: 'has-text-primary'}"></Caption>
|
||||
<div class="field is-grouped mb-0 pb-0">
|
||||
<div class="control is-expanded pr-3 mb-0" v-html="content"></div>
|
||||
<div class="control mb-0">
|
||||
<SvgIcon v-bind="{name: 'check2.svg', type: 'primary', size: 24}"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['content', 'title'],
|
||||
methods: {
|
||||
cancel() {
|
||||
this.$store.commit('updateStore', {name: 'showmodal', data: undefined})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
122
components/user/ChangePass.vue
Normal file
122
components/user/ChangePass.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: store.lang==='en'? 'Change password' : 'Đổi mật khẩu', type: 'has-text-warning'}"></Caption>
|
||||
<div class="field mt-5" style="width: 400px;">
|
||||
<label class="label">{{findLang('current-pass')}} <b class="has-text-danger">*</b></label>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder1')" v-model="currpass">
|
||||
</p>
|
||||
<div class="control">
|
||||
<a class="button" @click="showpass=!showpass">
|
||||
<SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find(v=>v.name==='currpass')">{{errors.find(v=>v.name==='currpass').text}}</p>
|
||||
</div>
|
||||
<div class="field mt-5" style="width: 400px;">
|
||||
<label class="label">{{findLang('new-pass')}} <b class="has-text-danger">*</b></label>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder1')" v-model="password">
|
||||
</p>
|
||||
<div class="control">
|
||||
<a class="button" @click="showpass=!showpass">
|
||||
<SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
|
||||
</div>
|
||||
<div class="field mt-5" style="width: 400px;">
|
||||
<label class="label">{{findLang('retype-pass')}} <b class="has-text-danger">*</b></label>
|
||||
<div class="field-body">
|
||||
<div class="field has-addons">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder2')" v-model="retypepass">
|
||||
</p>
|
||||
<div class="control">
|
||||
<a class="button" @click="showpass=!showpass">
|
||||
<SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find(v=>v.name==='retypepass')">{{errors.find(v=>v.name==='retypepass').text}}</p>
|
||||
</div>
|
||||
<div class="mt-5 pt-2">
|
||||
<button class="button is-primary has-text-white" @click="changePassword()">{{ findLang('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
errors: [],
|
||||
currpass: undefined,
|
||||
password: undefined,
|
||||
retypepass: undefined,
|
||||
showpass: true
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
return { store }
|
||||
},
|
||||
methods: {
|
||||
findLang(code) {
|
||||
let found = this.$find(this.store.common, {code: code})
|
||||
return found? found[this.store.lang] : null
|
||||
},
|
||||
async changePassword() {
|
||||
if(!this.checkPassword()) return
|
||||
let conn = this.$findapi('login')
|
||||
conn.params.filter = {username: this.store.login.username, password: this.currpass}
|
||||
let result= await this.$getapi([conn])
|
||||
let user = result.find(v => v.name==="login").data.rows
|
||||
if(!user) return this.errors.push({ name: 'currpass', text: 'Incorrect password.' })
|
||||
let rs0 = await this.$insertapi('gethash', {text: this.password}, undefined, false)
|
||||
user.password = rs0.rows[0]
|
||||
let rs = await this.$updateapi('user', user, undefined, false)
|
||||
if(rs!=='error') {
|
||||
this.currpass = undefined
|
||||
this.password = undefined
|
||||
this.retypepass = undefined
|
||||
this.$snackbar( 'Mật khẩu đã được thay đổi thành công. Vui lòng đăng nhập lại.')
|
||||
setTimeout(()=> window.location.href = window.location.href = 'https://login.bigdatatech.vn/signin?link=' + window.location.origin, 3000)
|
||||
} else {
|
||||
this.$snackbar( 'Đã xảy ra lỗi. Vui lòng thử lại.')
|
||||
}
|
||||
},
|
||||
checkPassword() {
|
||||
this.errors = []
|
||||
if (this.$empty(this.currpass)) {
|
||||
this.errors.push({ name: 'currpass', text: 'Mật khẩu không được để trống.' })
|
||||
} else if (this.currpass.length < 6) {
|
||||
this.errors.push({ name: 'currpass', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
|
||||
} else if (!(/\d/.test(this.currpass) && /[a-zA-Z]/.test(this.currpass))) {
|
||||
this.errors.push({ name: 'currpass', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
|
||||
}
|
||||
if (this.$empty(this.password)) {
|
||||
this.errors.push({ name: 'password', text: 'Mật khẩu không được để trống.' })
|
||||
} else if (this.password.length < 6) {
|
||||
this.errors.push({ name: 'password', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
|
||||
} else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
|
||||
this.errors.push({ name: 'password', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
|
||||
}
|
||||
if (this.$empty(this.retypepass)) {
|
||||
this.errors.push({ name: 'retypepass', text: 'Xác nhận mật khẩu không được để trống.' })
|
||||
} else if (this.password !== this.retypepass) {
|
||||
this.errors.push({ name: 'retypepass', text: 'Xác nhận mật khẩu phải trùng khớp với mật khẩu đã nhập.' })
|
||||
}
|
||||
return this.errors.length>0? false : true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
65
components/user/ConfirmCode.vue
Normal file
65
components/user/ConfirmCode.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<Caption v-bind="{title: 'Tạo mã duyệt'}"></Caption>
|
||||
<article class="message is-dark">
|
||||
<div class="message-body py-2 mt-5 has-text-dark">
|
||||
Khi thực hiện các tác vụ quan trọng như giải ngân, hạch toán...hệ thống sẽ yêu cầu nhập mã đuyệt. Mã duyệt là một chuỗi gồm 4 chữ số, hãy ghi nhớ mã này
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="field is-grouped mt-5">
|
||||
<div class="control mr-5" v-for="v in [1,2,3,4]">
|
||||
<input class="input is-dark" style="font-size: 18px; max-width: 40px; font-weight:bold; text-align: center;" type="password"
|
||||
maxlength="1" :id="`input${v}`" v-model="data[v]" @keyup="changeNext(v)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a @click="reset()">Nhập lại</a>
|
||||
</div>
|
||||
<div class="mt-5 pt-3">
|
||||
<button class="button is-primary" @click="confirm()">Xác nhận</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
code: undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reset()
|
||||
},
|
||||
methods: {
|
||||
async confirm() {
|
||||
if(this.checkError()) return this.$snackbar('Mã phê duyệt gồm 4 số từ 0-9')
|
||||
let user = await this.$getdata('user', undefined, {filter: {id: this.$store.state.login.id}}, true)
|
||||
user.approval_code = this.code
|
||||
await this.$updateapi('user', user)
|
||||
},
|
||||
checkError() {
|
||||
if(Object.keys(this.data).length<4) return true
|
||||
let code = ''
|
||||
for (let val in this.data) {
|
||||
if(!this.$empty(val)) code += val.toString()
|
||||
}
|
||||
if(this.$empty(code) || !this.$isNumber(code)) return true
|
||||
this.code = code
|
||||
return false
|
||||
},
|
||||
changeNext(v) {
|
||||
if(this.$empty(this.data[v])) return
|
||||
else if(v===4) return this.checkError()
|
||||
let doc = document.getElementById(`input${v+1}`)
|
||||
if(doc) doc.focus()
|
||||
},
|
||||
reset() {
|
||||
this.data = {}
|
||||
let doc = document.getElementById(`input1`)
|
||||
if(doc) doc.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user