241 lines
9.4 KiB
Vue
241 lines
9.4 KiB
Vue
<template>
|
|
<div>
|
|
<p class="panel-tabs">
|
|
<a v-for="(v,i) in fieldType" :key="i"
|
|
:class="selectType.code===v.code? 'is-active' : ''"
|
|
@click="selectType = v"
|
|
>
|
|
{{v.name}}
|
|
</a>
|
|
</p>
|
|
|
|
<template v-if="selectType.code==='formula'">
|
|
<div class="field mt-1 px-0 mx-0">
|
|
<label class="label fs-14"> Chọn 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="pageData? pageData.fields.filter(v=>v.format==='number') : []"
|
|
type="is-primary is-light"
|
|
autocomplete
|
|
:open-on-focus="true"
|
|
field="label"
|
|
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="tags.find(v=>v.id===props.option.id)? 'has-text-primary' : ''"> {{props.option.label}} </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">
|
|
<a @dblclick="formula = formula? (formula + ' ' + v.name) : v.name" class="tag is-rounded" v-for="(v,i) in tags" :key="i">{{v.name}}</a>
|
|
</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 is-small" rows="3" type="text" 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="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 mt-3 px-0 mx-0">
|
|
<label class="label fs-14">Tên trường <span class="has-text-danger"> * </span> </label>
|
|
<p class="control">
|
|
<input class="input is-small" 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="field mt-3">
|
|
<label class="label fs-14"> Mô tả <span class="has-text-danger"> * </span> </label>
|
|
<p class="control is-expanded">
|
|
<input class="input is-small" type="text" placeholder="" v-model="label">
|
|
</p>
|
|
<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-3" v-if="selectType.code==='empty'">
|
|
<label class="label fs-14"
|
|
>Kiểu dữ liệu
|
|
<span class="has-text-danger"> * </span>
|
|
</label>
|
|
<div class="control fs-14">
|
|
<b-radio v-for="(v,i) in datatype.filter(x=>x.code!=='date')" :key="i" v-model="radioType" :native-value="v">
|
|
{{v.name}}
|
|
</b-radio>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field mt-4">
|
|
<p class="control">
|
|
<a class="button is-primary is-small is-outlined is-rounded"
|
|
@click="selectType.code==='formula'? createField() : createEmptyField()"> Tạo trường</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['pagename'],
|
|
data() {
|
|
return {
|
|
selectUnit: undefined,
|
|
data: [],
|
|
current: 1,
|
|
filterData: [],
|
|
loading: false,
|
|
fieldType: [{code: 'formula', name: 'Công thức'}, {code: 'empty', name: 'Trường rỗng'}],
|
|
tags: [],
|
|
formula: undefined,
|
|
name: 'f' + this.$dayjs(new Date()).format("hhmmss"),
|
|
label: undefined,
|
|
errors: [],
|
|
selectType: undefined,
|
|
radioType: undefined,
|
|
decimal: undefined
|
|
}
|
|
},
|
|
created() {
|
|
this.radioType = this.datatype.find(v=>v.code==='string')
|
|
this.selectType = this.fieldType.find(v=>v.code==='formula')
|
|
this.selectUnit = this.moneyunit.find(v=>v.code==='one')
|
|
},
|
|
computed: {
|
|
moneyunit: {
|
|
get: function() {return this.$store.state.moneyunit},
|
|
set: function(val) {this.$store.commit("updateMoneyUnit", {moneyunit: val})}
|
|
},
|
|
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})}
|
|
},
|
|
datatype: {
|
|
get: function() {return this.$store.state.datatype},
|
|
set: function(val) {this.$store.commit("updateDataType", {datatype: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
checkValid() {
|
|
this.errors = []
|
|
if(this.tags.length===0) {
|
|
this.errors.push({name: 'tags', message: 'Chưa chọn trường xây dựng công thức.'})
|
|
}
|
|
|
|
if(!this.$empty(this.formula)? this.$empty(this.formula.trim()) : true) {
|
|
this.errors.push({name: 'formula', message: 'Công thức không được bỏ trống.'})
|
|
}
|
|
|
|
if(!this.$empty(this.label)? this.$empty(this.label.trim()) : true )
|
|
this.errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
|
else if(this.pageData.fields.find(v=>v.label.toLowerCase()===this.label.toLowerCase())) {
|
|
this.errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
|
}
|
|
|
|
if(this.errors.length>0) return false
|
|
//check formula
|
|
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ệ'})
|
|
}
|
|
return this.errors.length>0? false : true
|
|
},
|
|
createField() {
|
|
if(!this.checkValid()) return
|
|
let field = this.$createField(this.name.trim(), this.label.trim(), 'number', true)
|
|
field.formula = this.formula.trim()
|
|
field.tags = this.tags.map(v=>v.name)
|
|
field.level = Math.max(...this.tags.map(v=>v.level? v.level : 0)) + 1
|
|
field.unit = this.selectUnit.detail
|
|
field.decimal = this.decimal
|
|
field.disable = 'search,value'
|
|
let copy = this.$copy(this.pageData.fields)
|
|
copy.push(field)
|
|
this.$store.commit("updateState", {name: this.pagename, key: "update", data: {fields: copy}})
|
|
this.$emit('newfield', field)
|
|
this.tags = []
|
|
this.formula = undefined
|
|
this.label = undefined
|
|
this.name = 'f' + this.$dayjs(new Date()).format("hhmmss")
|
|
},
|
|
createEmptyField() {
|
|
this.errors = []
|
|
if(!this.$empty(this.name)? this.$empty(this.name.trim()) : true )
|
|
this.errors.push({name: 'name', message: 'Tên không được bỏ trống.'})
|
|
else if(this.pageData.fields.find(v=>v.name.toLowerCase()===this.name.toLowerCase())) {
|
|
this.errors.push({name: 'name', message: 'Tên trường bị trùng. Hãy đặt tên khác.'})
|
|
}
|
|
if(!this.$empty(this.label)? this.$empty(this.label.trim()) : true )
|
|
this.errors.push({name: 'label', message: 'Mô tả không được bỏ trống.'})
|
|
else if(this.pageData.fields.find(v=>v.label.toLowerCase()===this.label.toLowerCase())) {
|
|
this.errors.push({name: 'label', message: 'Mô tả bị trùng. Hãy đặt mô tả khác.'})
|
|
}
|
|
if(this.errors.length>0) return
|
|
let field = this.$createField(this.name.trim(), this.label.trim(), this.radioType.code, true)
|
|
let copy = this.$copy(this.pageData.fields)
|
|
copy.push(field)
|
|
this.$store.commit("updateState", {name: this.pagename, key: "fields", data: copy})
|
|
this.$emit('newfield', field)
|
|
this.label = undefined
|
|
this.name = 'f' + this.$dayjs(new Date()).format("hhmmss")
|
|
}
|
|
}
|
|
}
|
|
</script>
|