112 lines
4.5 KiB
Vue
112 lines
4.5 KiB
Vue
<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> |