195 lines
7.9 KiB
Vue
195 lines
7.9 KiB
Vue
<template>
|
|
<div>
|
|
<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)">
|
|
<div style="max-height:530px; overflow-y:auto">
|
|
<template v-if="radio? (radio.code==='condition' && sideBar==='bgcolor') : false">
|
|
<div v-for="(v,i) in bgcolorFilter" :key="v.id" class="px-4 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
|
|
<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 has-text-centered" :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 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
|
|
<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 has-text-centered" :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 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
|
|
<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 has-text-centered" :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>
|
|
</div>
|
|
<!--<p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="update()">Cập nhật</button></p>-->
|
|
</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 fs-20">
|
|
<i class="mdi mdi-content-copy"/>
|
|
</span>
|
|
Copy
|
|
</a>
|
|
<a @click="paste()" class="mr-6">
|
|
<span class="icon fs-20">
|
|
<i class="mdi mdi-content-copy"/>
|
|
</span>
|
|
Paste
|
|
</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
|
|
<span class="material-symbols-outlined">
|
|
chevron_right
|
|
</span>
|
|
</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
|
|
<span class="material-symbols-outlined">
|
|
chevron_right
|
|
</span>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
components: {
|
|
FilterOption: () => import("@/components/datatable/FilterOption"),
|
|
TableOption: () => import("@/components/datatable/TableOption"),
|
|
CreateTemplate: () => import("@/components/datatable/CreateTemplate")
|
|
},
|
|
props: ['event', 'currentField', 'pagename'],
|
|
data() {
|
|
return {
|
|
openField: {},
|
|
bgcolorFilter: [],
|
|
colorFilter: [],
|
|
sizeFilter: [],
|
|
sideBar: undefined,
|
|
script: undefined,
|
|
radio: undefined,
|
|
tabs: [{code: 'expression', name: 'Biểu thức'}, {code: 'script', name: 'Mã lệnh'}],
|
|
tab: {code: 'expression', name: 'Biểu thức'},
|
|
source: undefined,
|
|
target: this.$copy(this.currentField.name),
|
|
openField: this.$copy(this.currentField)
|
|
}
|
|
},
|
|
created() {
|
|
this.openField = this.event.field
|
|
this.sideBar = this.event.name
|
|
this.script = this.event.script
|
|
this.radio = this.event.radio
|
|
let field = this.event.field
|
|
this.bgcolorFilter = [{id: this.$id()}]
|
|
if(field.bgcolor) {
|
|
if(Array.isArray(field.bgcolor)) this.bgcolorFilter = this.$copy(field.bgcolor)
|
|
}
|
|
this.colorFilter = [{id: this.$id()}]
|
|
if(field.color) {
|
|
if(Array.isArray(field.color)) this.colorFilter = this.$copy(field.color)
|
|
}
|
|
this.sizeFilter = [{id: this.$id()}]
|
|
if(field.textsize) {
|
|
if(Array.isArray(field.textsize)) this.sizeFilter = field.textsize
|
|
}
|
|
},
|
|
methods: {
|
|
doCheck() {
|
|
let text = window.getSelection().toString()
|
|
if(this.$empty(text)) return
|
|
this.source = text
|
|
},
|
|
replace() {
|
|
if(this.$empty(this.script)) return
|
|
this.script = this.script.replaceAll(this.source, this.target)
|
|
},
|
|
async paste() {
|
|
this.script = await navigator.clipboard.readText()
|
|
},
|
|
addCondition(arr) {
|
|
arr.push({id: this.$id()})
|
|
},
|
|
removeCondition(arr, i) {
|
|
this.$delete(arr, i)
|
|
},
|
|
copyContent(value) {
|
|
this.$copyToClipboard(value)
|
|
},
|
|
checkScript() {
|
|
if(this.$empty(this.script)) return
|
|
try {
|
|
JSON.parse(this.script)
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
changeScript() {
|
|
if(!this.checkScript()) return
|
|
let copy = this.$copy(this.openField)
|
|
copy[this.sideBar] = JSON.parse(this.script)
|
|
this.$emit('modalevent', {name: 'updatefields', data: copy})
|
|
this.$buefy.toast.open('Màu / cỡ chữ đã được cập nhật')
|
|
this.$emit('close')
|
|
},
|
|
doConditionFilter(v, type, id) {
|
|
v.id = id
|
|
let copy = this.openField
|
|
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]
|
|
this.$emit('modalevent', {name: 'updatefields', data: this.openField})
|
|
}
|
|
}
|
|
}
|
|
</script> |