946 lines
39 KiB
Vue
946 lines
39 KiB
Vue
<template>
|
|
<div class="fs-14 has-text-weight-normal">
|
|
<div>
|
|
<b-tooltip label="Sắp xếp tăng dần" type="is-dark" position="is-right">
|
|
<a @click="checkFilter()? false : $emit('modalevent', {name: 'dosort', data: 'az'})">
|
|
<span class="icon is-medium fs-22 mr-2" :class="checkFilter()? 'has-text-grey-light' : ''">
|
|
<i class="mdi mdi-sort-alphabetical-ascending" />
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Sắp xếp giảm dần" type="is-dark" position="is-right">
|
|
<a @click="checkFilter()? false : $emit('modalevent', {name: 'dosort', data: 'za'})">
|
|
<span class="icon is-medium fs-22 mr-2" :class="checkFilter()? 'has-text-grey-light' : '' " >
|
|
<i class="mdi mdi-sort-alphabetical-descending" />
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Chuyển cột sang trái" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-22 mr-2" @click="moveLeft()">
|
|
<i class="mdi mdi-arrow-left" />
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Chuyển cột sang phải" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-22 mr-2" @click="moveRight()">
|
|
<i class="mdi mdi-arrow-right"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Ẩn cột" type="is-dark" position="is-right">
|
|
<a @click="hideField()">
|
|
<span class="icon is-medium fs-22 mr-2">
|
|
<i class="mdi mdi-eye-off-outline"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Xóa cột" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-22 mr-2" @click="currentField.mandatory? false : doRemove()">
|
|
<i :class="`mdi mdi-delete-outline ${currentField.mandatory? 'has-text-grey-light' : ''}`"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Sao chép cột" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-20 mr-2" @click="$emit('modalevent', {name: 'copyfield', data:currentField})">
|
|
<i class="mdi mdi-content-copy"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Tăng độ rộng cột" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-22 mr-2" @click="resizeWidth()">
|
|
<i class="mdi mdi-arrow-expand-horizontal"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Giảm độ rộng cột" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium fs-22 mr-2" @click="resizeWidth(true)">
|
|
<i class="mdi mdi-arrow-collapse-horizontal"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<b-tooltip label="Danh sách cột" type="is-dark" position="is-right">
|
|
<a>
|
|
<span class="icon is-medium mr-2 fs-22" @click="$emit('modalevent', {name: 'showsidebar', data: {field: currentField, name: 'option'}})">
|
|
<i class="mdi mdi-format-list-bulleted"/>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
</div>
|
|
<div class="field mt-2 mb-2" v-if="currentField.disable? currentField.disable.indexOf('search') <0 : true">
|
|
<div :class="loading? 'control is-loading' : 'control'">
|
|
<input class="input is-rounded fs-13" type="text" v-model="search" @keyup="startSearch" @keypress.enter="pressEnter"
|
|
:placeholder="'Tìm kiếm: ' + (currentField.label.indexOf('<')>=0? currentField.name : currentField.label)"
|
|
@focus="doFocus()" :ref="currentField.name">
|
|
</div>
|
|
</div>
|
|
<p 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' : ''" @click="selectTab=v"> {{v.name}}
|
|
</a>
|
|
</p>
|
|
<template v-if="selectTab.code==='value'">
|
|
<ScrollBox v-bind="{data: filterData, name: currentField.name, maxheight: '380px', perpage: 20, selects: checkSelected()}"
|
|
@selected="doSelect" />
|
|
</template>
|
|
<template v-else-if="selectTab.code==='display'">
|
|
<div class="field is-horizontal border-bottom pb-0 mb-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" :key="i" v-model="radioBGcolor"
|
|
:native-value="v" @input="changeBGColor()">
|
|
{{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="changeBGColor()">
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioBGcolor? radioBGcolor.code==='condition' : false">
|
|
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<a class="button is-small is-primary is-outlined is-rounded" @click="doAdvance('bgcolor')"> Nâng cao </a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal border-bottom pb-0 mb-1">
|
|
<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" :key="i" v-model="radioColor"
|
|
:native-value="v" @input="changeColor()">
|
|
{{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="changeColor()">
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioColor? radioColor.code==='condition' : false">
|
|
<label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<a class="button is-small is-primary is-outlined is-rounded" @click="doAdvance('color')"> Nâng cao </a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal border-bottom pb-0 mb-1">
|
|
<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" :key="i" v-model="radioSize"
|
|
:native-value="v" @input="changeSize()">
|
|
{{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="changeSize()">
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioSize? radioSize.code==='condition' : false">
|
|
<label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<a class="button is-small is-primary is-outlined is-rounded" @click="doAdvance('textsize')"> Nâng cao </a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal pb-0 mb-1 border-bottom">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label fs-14">Vị trí text</label>
|
|
<p class="control fs-14">
|
|
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioAlign"
|
|
:native-value="v" @input="changeAlign()">{{v.name}}
|
|
</b-radio>
|
|
</p>
|
|
</div>
|
|
<div class="field is-narrow" v-if="radioAlign? radioAlign.code==='option' : false">
|
|
<label class="label fs-14">Chọn vị trí <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<b-autocomplete
|
|
size="is-small"
|
|
icon-right="magnify"
|
|
:value="selectAlign? selectAlign.name : ''"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="textalign"
|
|
field="name"
|
|
@select="option => { selectAlign = option; changeAlign()}">
|
|
</b-autocomplete>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal border-bottom pb-0 mb-1">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label fs-14">Độ rộng nhỏ nhất</label>
|
|
<p class="control fs-14">
|
|
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioWidth"
|
|
:native-value="v" @input="changeWidth()">
|
|
{{v.name}}
|
|
</b-radio>
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioWidth? radioWidth.code==='option' : false">
|
|
<label class="label fs-14"> Kích thước</label>
|
|
<p class="control fs-14">
|
|
<input class="input is-small" type="text" placeholder="Nhập số" v-model="minwidth" @change="changeWidth()">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal border-bottom pb-0 mb-1">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label fs-14">Độ rộng lớn nhất</label>
|
|
<p class="control fs-14">
|
|
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioMaxWidth"
|
|
:native-value="v" @input="changeMaxWidth()">
|
|
{{v.name}}
|
|
</b-radio>
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioMaxWidth? radioMaxWidth.code==='option' : false">
|
|
<label class="label fs-14"> Kích thước</label>
|
|
<p class="control fs-14">
|
|
<input class="input is-small" type="text" placeholder="Nhập số" v-model="maxwidth" @change="changeMaxWidth()">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="selectTab.code==='filter'">
|
|
<p class="mt-5 has-text-grey" v-if="arr===undefined">Không thể áp dụng đồng thời chức năng lọc cùng với sắp xếp</p>
|
|
<div :class="`field is-horizontal mt-4`" v-for="(v,i) in arr" :key="i">
|
|
<div class="field-body">
|
|
<div class="field" style="width: 10%;">
|
|
<label class="label" v-if="i===0">Điều kiện<span class="has-text-danger"> * </span></label>
|
|
<p class="control">
|
|
<b-autocomplete
|
|
icon-right="magnify"
|
|
v-model="v.condition"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="arr2"
|
|
field="code"
|
|
@select="option => doOption()">
|
|
</b-autocomplete>
|
|
</p>
|
|
</div>
|
|
<div class="field" style="width:30%">
|
|
<label class="label" v-if="i===0">Giá trị<span class="has-text-danger"> *</span></label>
|
|
<p class="control">
|
|
<input class="input" type="text" placeholder="" v-model="v.value" @change="checkValid()">
|
|
</p>
|
|
<p class="is-help mt-2 has-text-danger" v-if="v.error">{{v.error}}</p>
|
|
</div>
|
|
<div class="field" style="width: 10%;" v-if="arr.length>=1 && i===arr.length-2">
|
|
<label class="label" v-if="i===0">Kết hợp<span class="has-text-danger"> * </span></label>
|
|
<p class="control">
|
|
<b-autocomplete
|
|
icon-right="magnify"
|
|
v-model="v.operator"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="arr1"
|
|
field="code"
|
|
@select="option => doOption()">
|
|
</b-autocomplete>
|
|
</p>
|
|
</div>
|
|
<div class="field is-narrow">
|
|
<div class="control">
|
|
<div :class="i===0? 'mt-5 pt-2' : ''">
|
|
<span class="icon has-text-primary is-clickable" @click="addCondition()" v-if="arr.length<2">
|
|
<i class="mdi mdi-plus-thick fs-22"></i>
|
|
</span>
|
|
<span class="icon has-text-danger is-clickable" @click="removeCondition(i)" v-if="arr.length>1">
|
|
<i class="mdi mdi-minus-thick fs-22"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="selectTab.code==='detail'">
|
|
<p class="fs-14 mt-3"> <strong> Tên trường: </strong> {{currentField.name}}
|
|
<a @click="copyContent(currentField.name)">
|
|
<b-tooltip label="Copy tên trường" type="is-dark">
|
|
<span class="icon">
|
|
<i class="mdi mdi-content-copy"/>
|
|
</span>
|
|
</b-tooltip>
|
|
</a>
|
|
</p>
|
|
<div class="field mt-3">
|
|
<label class="label fs-14">Mô tả<span class="has-text-danger"> *</span></label>
|
|
<div class="control has-icons-right">
|
|
<input
|
|
class="input fs-14"
|
|
type="text"
|
|
@change="changeLabel($event.target.value)"
|
|
v-model="label"
|
|
/>
|
|
<a class="button is-clickable icon is-right fs-14" @click="editLabel()">
|
|
<i class="mdi mdi-pen has-text-primary fs-18"></i>
|
|
</a>
|
|
<p class="help is-danger" v-if="errors.find((v) => v.name === 'label')">
|
|
{{ errors.find((v) => v.name === "label").msg }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<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 has-text-primary">
|
|
<b-radio v-for="(v,i) in datatype" :key="i" v-model="radioType" :native-value="v" disabled>
|
|
{{v.name}}
|
|
</b-radio>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal" v-if="field.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">
|
|
<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; changeUnit()}">
|
|
</b-autocomplete>
|
|
</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 is-small" 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">
|
|
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioTemplate"
|
|
:native-value="v" @input="changeTemplate(undefined)">
|
|
{{v.name}}
|
|
</b-radio>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-3" v-if="radioTemplate? radioTemplate.code==='option' : false">
|
|
<button class="button is-primary is-outlined is-rounded is-small" @click="$emit('modalevent', {name: 'showsidebar', data: {name: 'template', field: currentField}})">
|
|
<span class="fs-14">{{`${currentField.template? 'Sửa' : 'Tạo'} định dạng`}}</span>
|
|
</button>
|
|
</p>
|
|
</template>
|
|
<template v-if="selectTab.code==='tooltip'">
|
|
<p class="mt-5 fs-15 has-text-dark" v-if="currentField.template">
|
|
Không thể sử dụng đồng thời template và tooltip
|
|
</p>
|
|
<template v-else>
|
|
<div class="field mt-3">
|
|
<label class="label fs-14">Sử dụng tooltip</label>
|
|
<p class="control fs-14">
|
|
<b-radio v-for="(v,i) in colorchoice.filter(v=>v.code!=='condition')" :key="i" v-model="radioTooltip"
|
|
:native-value="v" @input="changeTooltip()">
|
|
{{v.name}}
|
|
</b-radio>
|
|
</p>
|
|
</div>
|
|
<div class="field" v-if="radioTooltip? radioTooltip.code==='option' : false">
|
|
<label class="label fs-14"> Chọn trường <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<b-autocomplete
|
|
size="is-small"
|
|
icon-right="magnify"
|
|
:value="selectField? selectField.label : ''"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="pagedata.fields"
|
|
field="label"
|
|
@select="option => {selectField = option; changeTooltip()}">
|
|
</b-autocomplete>
|
|
</p>
|
|
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tooltip')"> {{errors.find(v=>v.name==='tooltip').msg}} </p>
|
|
</div>
|
|
<div class="field mt-3" v-if="radioTooltip? radioTooltip.code==='option' : false">
|
|
<label class="label fs-14"> Vị trí hiển thị <span class="has-text-danger"> * </span> </label>
|
|
<p class="control">
|
|
<b-autocomplete
|
|
size="is-small"
|
|
icon-right="magnify"
|
|
:value="selectPlacement? selectPlacement.name : ''"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="placement"
|
|
field="name"
|
|
@select="option => {selectPlacement = option; changeTooltip()}">
|
|
</b-autocomplete>
|
|
</p>
|
|
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='placement')"> {{errors.find(v=>v.name==='placement').msg}} </p>
|
|
</div>
|
|
<div class="field mt-3" v-if="radioTooltip? radioTooltip.code==='option' : false">
|
|
<label class="label fs-14"> Bảng màu <span class="has-text-danger"> * </span> </label>
|
|
<p class="control fs-14">
|
|
<b-autocomplete
|
|
size="is-small"
|
|
icon-right="magnify"
|
|
:value="selectScheme? selectScheme.name : ''"
|
|
placeholder=""
|
|
:keep-first=true
|
|
:open-on-focus=true
|
|
:data="colorscheme"
|
|
field="name"
|
|
@select="option => {selectScheme = option; changeTooltip()}">
|
|
</b-autocomplete>
|
|
</p>
|
|
<p class="help has-text-danger" v-if="errors.find(v=>v.name==='tooltip')"> {{errors.find(v=>v.name==='tooltip').msg}} </p>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template v-if="selectTab.code==='formula'">
|
|
<div class="field mt-3 px-0 mx-0">
|
|
<label class="label fs-14"> Trường để tạo công thức <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">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 + ' ' + y.name) : y.name" class="tag is-dark is-rounded is-clickable"
|
|
v-for="y in tags"><b-tooltip type="is-primary" :label="$stripHtml(y.label)">{{y.name}}</b-tooltip></span>
|
|
</div>
|
|
<div class="tags">
|
|
<b-tooltip type="is-dark" :label="v.name" 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>
|
|
</b-tooltip>
|
|
</div>
|
|
</div>
|
|
<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="4" type="text" placeholder="Tạo công thức tại đây" 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 class="mt-5"><button class="button is-primary is-rounded" @click="changeFormula()">Cập nhật</button></div>
|
|
</template>
|
|
<Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @label="changeLabel"></Modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
components: {
|
|
ScrollBox: ()=> import('@/components/datatable/ScrollBox')
|
|
},
|
|
props: ['pagename', 'field', 'filters', 'filterData', 'width'],
|
|
data() {
|
|
return {
|
|
search: undefined,
|
|
loading: false,
|
|
fields: [],
|
|
current: 1,
|
|
currentPage: 1,
|
|
timer: undefined,
|
|
selectTab: undefined,
|
|
radioBGcolor: undefined,
|
|
radioColor: undefined,
|
|
radioSize: undefined,
|
|
selectAlign: undefined,
|
|
radioAlign: undefined,
|
|
radioWidth: undefined,
|
|
minwidth: undefined,
|
|
color: undefined,
|
|
bgcolor: undefined,
|
|
textsize: undefined,
|
|
showPage: 1,
|
|
perPage: 30,
|
|
value1: undefined,
|
|
value2: undefined,
|
|
errors: [],
|
|
label: undefined,
|
|
radioType: undefined,
|
|
selectUnit: undefined,
|
|
radioTemplate: undefined,
|
|
currentField: this.$copy(this.field),
|
|
selectPlacement: undefined,
|
|
radioTooltip: undefined,
|
|
selectScheme: undefined,
|
|
selectField: undefined,
|
|
tags: [],
|
|
formula: undefined,
|
|
radioMaxWidth: undefined,
|
|
maxwidth: undefined,
|
|
bgcolorFilter: [{id: this.$id()}],
|
|
colorFilter: [{id: this.$id()}],
|
|
sizeFilter: [{id: this.$id()}],
|
|
tabs: [{code: 'expression', name: 'Biểu thức'}, {code: 'script', name: 'Mã lệnh'}],
|
|
tab: {},
|
|
decimal: undefined,
|
|
arr: [{id:this.$id(), operator: 'and'}],
|
|
arr1: [{code: 'and', name: '&&'}, {code: 'or', name: 'or'}],
|
|
arr2: [{code: '>', name: 'gt'}, {code: '>=', name: 'gte'}, {code: '=', name: 'e'},
|
|
{code: '<=', name: 'lte'}, {code: '<', name: 'lt'}, {code: '<>', name: 'oth'}],
|
|
showmodal: undefined,
|
|
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'}]
|
|
}
|
|
},
|
|
created() {
|
|
this.label = this.$copy(this.field.label)
|
|
this.getFields()
|
|
this.selectTab = this.getMenu()[0]
|
|
this.tab = this.tabs.find(v=>v.code==='expression')
|
|
let found = this.filters.find(v=>v.name===this.field.name)
|
|
if(found) this.arr = this.$copy(found.filter)
|
|
this.getDisplay(this.field)
|
|
},
|
|
watch: {
|
|
selectTab: function(newVal) {
|
|
if(newVal? newVal.code==='value' : false) {
|
|
if(this.$refs[this.field.name]) this.$refs[this.field.name].focus()
|
|
}
|
|
},
|
|
field: function(newVal) {
|
|
this.currentField = this.$copy(newVal)
|
|
this.getDisplay(newVal)
|
|
}
|
|
},
|
|
computed: {
|
|
pagedata: {
|
|
get: function() {return this.$store.state[this.pagename]},
|
|
set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
|
|
},
|
|
tablesetting: {
|
|
get: function() {return this.$store.state.tablesetting},
|
|
set: function(val) {this.$store.commit("updateTableSetting", {tablesetting: val})}
|
|
},
|
|
colorchoice: {
|
|
get: function() {return this.$store.state.colorchoice},
|
|
set: function(val) {this.$store.commit("updateColorChoice", {colorchoice: val})}
|
|
},
|
|
textalign: {
|
|
get: function() {return this.$store.state.textalign},
|
|
set: function(val) {this.$store.commit("updateTextAlign", {textalign: val})}
|
|
},
|
|
filterchoice: {
|
|
get: function () {return this.$store.state.filterchoice},
|
|
set: function (val) {this.$store.commit("updateFilterChoice", { filterchoice: val })}
|
|
},
|
|
datatype: {
|
|
get: function() {return this.$store.state.datatype},
|
|
set: function(val) {this.$store.commit("updateDataType", {datatype: val})}
|
|
},
|
|
moneyunit: {
|
|
get: function() {return this.$store.state.moneyunit},
|
|
set: function(val) {this.$store.commit("updateMoneyUnit", {moneyunit: val})}
|
|
},
|
|
menuaction: {
|
|
get: function() {return this.$store.state.menuaction},
|
|
set: function(val) {this.$store.commit("updateMenuAction", {menuaction: val})}
|
|
},
|
|
placement: {
|
|
get: function() {return this.$store.state.placement},
|
|
set: function(val) {this.$store.commit("updatePlacement", {placement: val})}
|
|
},
|
|
colorscheme: {
|
|
get: function() {return this.$store.state.colorscheme},
|
|
set: function(val) {this.$store.commit("updateColorScheme", {colorscheme: val})}
|
|
},
|
|
menuchoice: {
|
|
get: function() {return this.$store.state.menuchoice},
|
|
set: function(val) {this.$store.commit("updateMenuChoice", {menuchoice: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
addOperator(v) {
|
|
let text = v.code==='iif'? 'a>b? c : d' : v.code
|
|
this.formula = `${this.formula || ''} ${text}`
|
|
},
|
|
doSelect(row) {
|
|
this.$emit('modalevent', {name: 'doselect', data: row[this.field.name]})
|
|
},
|
|
editLabel() {
|
|
this.showmodal = {component: 'datatable/EditLabel', width: '500px', height: '300px', vbind: {label: this.label}}
|
|
},
|
|
addCondition() {
|
|
this.arr.push({})
|
|
},
|
|
removeCondition(i) {
|
|
this.$delete(this.arr, i)
|
|
this.setFilter(this.field)
|
|
},
|
|
getMenu() {
|
|
let field = this.getfield()
|
|
let arr = field.disable? field.disable.split(',') : undefined
|
|
return arr? this.menuchoice.filter(v=>arr.findIndex(x=>x===v.code) <0) : this.menuchoice
|
|
},
|
|
getFields() {
|
|
this.fields = this.pagedata? this.$copy(this.pagedata.fields) : []
|
|
this.fields.map(v=>v.caption = (v.label? v.label.indexOf('<')>=0 : false)? v.name : v.label)
|
|
},
|
|
getDisplay(field) {
|
|
this.current = 1
|
|
this.value1 = undefined
|
|
this.value2 = undefined
|
|
this.radioType = this.datatype.find(v=>v.code===field.format)
|
|
if(field.format==='number') this.selectUnit = this.moneyunit.find(v=>v.detail===field.unit)
|
|
this.bgcolor = undefined
|
|
this.radioBGcolor = this.colorchoice.find(v=>v.code==='none')
|
|
this.color = undefined
|
|
this.radioColor = this.colorchoice.find(v=>v.code==='none')
|
|
this.textsize = undefined
|
|
this.radioSize = this.colorchoice.find(v=>v.code==='none')
|
|
this.minwidth = undefined
|
|
this.radioWidth = this.colorchoice.find(v=>v.code==='none')
|
|
this.radioMaxWidth = this.colorchoice.find(v=>v.code==='none')
|
|
this.maxwidth = undefined
|
|
this.selectAlign = undefined
|
|
this.radioAlign = this.colorchoice.find(v=>v.code==='none')
|
|
this.radioTemplate = this.colorchoice.find(v=>v.code=== (field.template? 'option' : 'none'))
|
|
this.selectPlacement = this.placement.find(v=>v.code==='is-right')
|
|
this.selectScheme = this.colorscheme.find(v=>v.code==='is-primary')
|
|
this.radioTooltip = this.colorchoice.find(v=>v.code==='none')
|
|
this.selectField = undefined
|
|
this.tags = field.tags? field.tags.map(v=>this.fields.find(x=>x.name===v)) : []
|
|
this.formula = field.formula? field.formula : undefined
|
|
this.decimal = field.decimal
|
|
let shortmenu = this.menuchoice.filter(x=>field.format==='number'? (field.formula? true : x.code!=='formula')
|
|
: !['filter','formula'].find(y=>y===x.code))
|
|
this.selectTab = shortmenu.find(v=>this.selectTab.code===v.code)? this.selectTab : this.menuchoice.find(v=>v.code==='value')
|
|
this.search = undefined
|
|
if(this.selectTab.code==='value') {
|
|
let self = this
|
|
setTimeout(function() {self.$refs[field.name]? self.$refs[field.name].focus() : false}, 50)
|
|
}
|
|
|
|
this.bgcolorFilter = [{id: this.$id()}]
|
|
if(field.bgcolor) {
|
|
if(Array.isArray(field.bgcolor)) {
|
|
this.radioBGcolor = this.colorchoice.find(v=>v.code==='condition')
|
|
this.bgcolorFilter = this.$copy(field.bgcolor)
|
|
} else {
|
|
this.radioBGcolor = this.colorchoice.find(v=>v.code==='option')
|
|
this.bgcolor = field.bgcolor
|
|
}
|
|
}
|
|
|
|
this.colorFilter = [{id: this.$id()}]
|
|
if(field.color) {
|
|
if(Array.isArray(field.color)) {
|
|
this.radioColor = this.colorchoice.find(v=>v.code==='condition')
|
|
this.colorFilter = this.$copy(field.color)
|
|
} else {
|
|
this.radioColor = this.colorchoice.find(v=>v.code==='option')
|
|
this.color = field.color
|
|
}
|
|
}
|
|
this.sizeFilter = [{id: this.$id()}]
|
|
if(field.textsize) {
|
|
if(Array.isArray(field.textsize)) {
|
|
this.radioSize = this.colorchoice.find(v=>v.code==='condition')
|
|
this.sizeFilter = field.textsize
|
|
} else {
|
|
this.radioSize = this.colorchoice.find(v=>v.code==='option')
|
|
this.textsize = field.textsize
|
|
}
|
|
}
|
|
|
|
if(field.textalign) {
|
|
this.radioAlign = this.colorchoice.find(v=>v.code==='option')
|
|
this.selectAlign = this.textalign.find(v=>v.code===field.textalign)
|
|
}
|
|
|
|
if(field.minwidth) {
|
|
this.radioWidth = this.colorchoice.find(v=>v.code==='option')
|
|
this.minwidth = field.minwidth
|
|
}
|
|
|
|
if(field.maxwidth) {
|
|
this.radioMaxWidth = this.colorchoice.find(v=>v.code==='option')
|
|
this.maxwidth = field.maxwidth
|
|
}
|
|
|
|
if(field.tooltip) {
|
|
this.radioTooltip = this.colorchoice.find(v=>v.code==='option')
|
|
this.selectPlacement = this.placement.find(v=>v.code===field.tooltip.placement)
|
|
this.selectField = this.pagedata.fields.find(v=>v.name===field.tooltip.field)
|
|
this.selectScheme = this.colorscheme.find(v=>v.code===field.tooltip.type)
|
|
}
|
|
},
|
|
moveLeft() {
|
|
let i = this.pagedata.fields.findIndex(v=>v.name===this.field.name)
|
|
let copy = this.$copy(this.pagedata.fields)
|
|
let idx = i-1>=0? i - 1 : copy.length - 1
|
|
copy = this.$arrayMove(copy, i, idx)
|
|
this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy}})
|
|
this.$emit('changepos')
|
|
},
|
|
moveRight() {
|
|
let i = this.pagedata.fields.findIndex(v=>v.name===this.field.name)
|
|
let copy = this.$copy(this.pagedata.fields)
|
|
let idx = copy.length-1>i? i + 1 : 0
|
|
copy = this.$arrayMove(copy, i, idx)
|
|
this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy}})
|
|
this.$emit('changepos')
|
|
},
|
|
doRemove() {
|
|
let field = this.getfield()
|
|
let copy = this.$copy(this.pagedata.fields)
|
|
let idx = copy.findIndex(v=>v.name===field.name)
|
|
this.$delete(copy, idx)
|
|
this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy}})
|
|
this.$emit('close')
|
|
},
|
|
startSearch(event) {
|
|
if (this.timer) clearTimeout(this.timer)
|
|
let self = this
|
|
this.timer = setTimeout(() => { self.$emit('modalevent', {name: 'dosearch', data: event.srcElement.value})}, 100)
|
|
},
|
|
pressEnter(event) {
|
|
if(!this.$empty(event.srcElement.value) && this.filterData.length>0) this.$emit('modalevent', {name: 'doselect', data: this.filterData[0][this.field.name]})
|
|
},
|
|
getfield() {
|
|
return this.currentField
|
|
},
|
|
changeColor() {
|
|
let copy = this.getfield()
|
|
copy.color = this.radioColor.code==='none'? undefined : this.color
|
|
this.updateFields(copy)
|
|
},
|
|
changeBGColor() {
|
|
let copy = this.getfield()
|
|
copy.bgcolor = this.radioBGcolor.code==='none'? undefined : this.bgcolor
|
|
this.updateFields(copy)
|
|
},
|
|
checkSelected() {
|
|
let found = this.filters.find(v=>v.name===this.field.name)
|
|
return found? found.select : undefined
|
|
},
|
|
doAdvance(name) {
|
|
let field = this.getfield()
|
|
let script = (field[name]? Array.isArray(field[name]) : false)? JSON.stringify(field[name]) : undefined
|
|
this.$emit('modalevent', {name: 'showsidebar', data: {field: field, name: name, script: script,
|
|
radio: name==='bgcolor'? this.radioBGcolor : (name==='color'? this.radioColor : this.radioSize) }})
|
|
},
|
|
changeSize() {
|
|
let copy = this.getfield()
|
|
if(this.radioSize.code==='option' && !this.$isNumber(this.textsize)) return
|
|
copy.textsize = this.radioSize.code==='none'? undefined : this.textsize
|
|
this.updateFields(copy)
|
|
},
|
|
changeAlign() {
|
|
let copy = this.getfield()
|
|
copy.textalign = this.radioAlign.code==='none'? undefined : (this.selectAlign? this.selectAlign.code : undefined)
|
|
this.updateFields(copy)
|
|
},
|
|
changeWidth() {
|
|
let copy = this.getfield()
|
|
if(!this.$isNumber(this.minwidth)) return
|
|
copy.minwidth = this.radioWidth.code==='none'? undefined : this.minwidth
|
|
this.updateFields(copy)
|
|
},
|
|
changeMaxWidth() {
|
|
let copy = this.getfield()
|
|
if(!this.$isNumber(this.maxwidth)) return
|
|
copy.maxwidth = this.radioMaxWidth.code==='none'? undefined : this.maxwidth
|
|
this.updateFields(copy)
|
|
},
|
|
setFilter(field) {
|
|
let arr = this.arr.map(v=>{return {
|
|
condition: v.condition, value: v.value, operator: v.operator
|
|
}})
|
|
let text = ''
|
|
arr.map((y,k)=>{
|
|
text += `${k>0? (arr[k-1].operator==='and'? ' &' : ' ||') : ''} ${y.condition} ${this.$numtoString(y.value)}`
|
|
})
|
|
let filter = {name: field.name, label: field.label, filter: arr, condition: text}
|
|
this.$emit('modalevent', {name: 'setfilter', data: filter})
|
|
},
|
|
copyContent(value) {
|
|
this.$copyToClipboard(value)
|
|
},
|
|
changeLabel(value) {
|
|
if(this.$empty(value)) return
|
|
if(this.label!==value) this.label = value
|
|
let copy = this.getfield()
|
|
copy.label = value
|
|
this.updateFields(copy)
|
|
},
|
|
changeUnit() {
|
|
if(this.$empty(this.selectUnit)) return
|
|
let copy = this.getfield()
|
|
copy.unit = this.selectUnit.detail
|
|
this.updateFields(copy)
|
|
setTimeout(()=> this.menuaction = {pagename: this.pagename, name: 'reload-data', time: new Date()}, 1000)
|
|
},
|
|
changeTemplate(value) {
|
|
if(this.radioTemplate.code==='none') value = undefined
|
|
else if(this.$empty(value)) return
|
|
let copy = this.getfield()
|
|
copy.template = value
|
|
this.updateFields(copy)
|
|
},
|
|
changeDecimal(evt) {
|
|
if(!this.$isNumber(evt)) return
|
|
let copy = this.getfield()
|
|
copy.decimal = evt
|
|
this.updateFields(copy)
|
|
setTimeout(()=>this.menuaction = {pagename: this.pagename, name: 'reload-data', time: new Date()}, 1000)
|
|
},
|
|
checkFilter() {
|
|
if(!this.pagedata) return
|
|
let field = this.getfield()
|
|
let found = this.pagedata.filters? this.pagedata.filters.find(v=>v.name===field.name) : undefined
|
|
return found? (found.select || found.filter) : false
|
|
},
|
|
changeTooltip() {
|
|
let copy = this.getfield()
|
|
if(this.radioTooltip? this.radioTooltip.code==='none' : false) copy.tooltip = undefined
|
|
else if(!(this.selectField && this.selectPlacement && this.selectScheme)) return
|
|
else {copy.tooltip = {field: this.selectField.name, placement: this.selectPlacement.code, type: this.selectScheme.code}}
|
|
this.updateFields(copy)
|
|
},
|
|
changeFormula() {
|
|
let field = this.getfield()
|
|
//check formula
|
|
this.errors = []
|
|
let val = this.$copy(this.formula)
|
|
this.tags.forEach(v => {
|
|
let myRegExp = new RegExp(v.name, 'g')
|
|
val = val.replace(myRegExp, Math.random())
|
|
})
|
|
try {
|
|
let value = this.$calc(val)
|
|
if(isNaN(value) || value===Number.POSITIVE_INFINITY || value===Number.NEGATIVE_INFINITY) {
|
|
this.errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
|
}
|
|
}
|
|
catch(err) {
|
|
this.errors.push({name: 'formula', message: 'Công thức không hợp lệ'})
|
|
}
|
|
if(this.errors.length>0) return
|
|
let copyField = this.$copy(field)
|
|
copyField.formula = this.formula.trim()
|
|
copyField.tags = this.tags.map(v=>v.name)
|
|
copyField.level = Math.max(...this.tags.map(v=>v.level? v.level : 0)) + 1
|
|
this.updateFields(copyField, 'fields')
|
|
this.$emit('close')
|
|
},
|
|
updateFields(field, type) {
|
|
let copy = this.$copy(this.pagedata.fields)
|
|
let idx = copy.findIndex(v=>v.name===field.name)
|
|
copy[idx] = this.$copy(field)
|
|
if(type==='fields') this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy, data: this.pagedata.data}})
|
|
else {
|
|
this.$store.commit('updateState', {name: this.pagename, key: 'fields', data: copy})
|
|
if(this.field.inputitem) this.$updateinput(this.pagename)
|
|
setTimeout(()=>this.$store.commit("updateState", {name: this.pagename, key: "update", data: {columns: copy}}), 100)
|
|
}
|
|
},
|
|
doFocus() {
|
|
if(this.selectTab.code!=='value') this.selectTab = this.menuchoice.find(v=>v.code==='value')
|
|
},
|
|
hideField() {
|
|
let field = this.getfield()
|
|
let copy = this.$copy(this.pagedata.fields)
|
|
let found = copy.find(v=>v.name===field.name)
|
|
found.show = false
|
|
this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {fields: copy}})
|
|
this.$emit('close')
|
|
},
|
|
checkValid() {
|
|
let error
|
|
this.arr.map((v,i) => {
|
|
if(this.$empty(v.condition)) error = 'Chưa chọn điều kiện'
|
|
if(this.arr.length>=2 && i===0 && this.$empty(v.operator)) error = 'Chưa chọn kết hợp'
|
|
if(!this.$isNumber(v.value)) error = 'Giá trị phải là số'
|
|
if(error) v.error = error
|
|
else {
|
|
v.error = undefined
|
|
v.value = this.$numtoString(v.value)
|
|
}
|
|
})
|
|
this.arr = this.$copy(this.arr)
|
|
if(!error) this.setFilter(this.field)
|
|
},
|
|
doOption() {
|
|
setTimeout(()=> this.checkValid(), 100)
|
|
},
|
|
resizeWidth(minus) {
|
|
let val = this.maxwidth || this.minwidth || this.width
|
|
val = minus? parseInt(val - 0.1* val) : parseInt(val + 0.1* val)
|
|
if(val>1000) return this.$buefy.toast.open('Độ rộng cột lớn hơn giới hạn cho phép')
|
|
else if(val<20) return this.$buefy.toast.open('Độ rộng cột nhỏ hơn giới hạn cho phép')
|
|
this.radioMaxWidth = this.colorchoice.find(v=>v.code==='option')
|
|
this.radioWidth = this.colorchoice.find(v=>v.code==='option')
|
|
this.maxwidth = val
|
|
this.currentField.maxwidth = val
|
|
this.minwidth = val
|
|
this.currentField.minwidth = val
|
|
this.updateFields(this.currentField)
|
|
}
|
|
}
|
|
}
|
|
</script> |