188 lines
4.4 KiB
Vue
188 lines
4.4 KiB
Vue
<template>
|
|
<view class="_unitedit" :class="{_left:left}">
|
|
<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_unit1'" :value="unit1" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_num12'" :value="num12" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_unit2'" :value="unit2" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_num23'" :value="num23" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_unit3'" :value="unit3" style="display:none;" />
|
|
|
|
<ciy-input @change="chg" :disabled="disabled" v-model="unit1" class="_unit" type="text" />
|
|
<ciy-input @change="chg" :disabled="disabled" v-model="num12" class="_num" type="number" />
|
|
<ciy-input @change="chg" :disabled="disabled" v-model="unit2" class="_unit" type="text" />
|
|
<ciy-input @change="chg" :disabled="disabled" v-model="num23" class="_num" type="number" />
|
|
<ciy-input @change="chg" :disabled="disabled" v-model="unit3" class="_unit" type="text" />
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._unitedit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
._unitedit._left {
|
|
justify-content: start;
|
|
}
|
|
|
|
._unitedit ._unit {
|
|
width: 3em;
|
|
text-align: center;
|
|
padding: 0.5em 0px;
|
|
border: 1px solid var(--bg6);
|
|
background: var(--bg1);
|
|
border-radius: 0.3em;
|
|
}
|
|
|
|
._unitedit ._num {
|
|
width: 3em;
|
|
text-align: center;
|
|
margin-top: 0.3em;
|
|
padding: 0.3em 0;
|
|
font-size: 0.7em;
|
|
border-top: 1px solid var(--bg6);
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--bg6);
|
|
background: var(--bg2);
|
|
}
|
|
|
|
._unitedit ._num._disabled {
|
|
background: var(--bg5);
|
|
}
|
|
|
|
._unitedit ._unit._disabled {
|
|
background: var(--bg4);
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
unit1: '',
|
|
unit2: '',
|
|
unit3: '',
|
|
num12: '',
|
|
num23: '',
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newD, oldD) {
|
|
this.setvalue(newD, oldD);
|
|
}
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
this.setvalue(newD, oldD);
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
tvalue() {
|
|
if (this.unit1) {
|
|
var num12 = this.toint(this.num12);
|
|
var num23 = this.toint(this.num23);
|
|
if (this.unit2 && num12 > 0 && this.unit2 != this.unit1) {
|
|
if (this.unit3 && num23 > 0 && this.unit3 != this.unit1 && this.unit3 != this.unit2)
|
|
return this.unit1 + '|' + num12 + '|' + this.unit2 + '|' + num23 + '|' + this.unit3;
|
|
else
|
|
return this.unit1 + '|' + num12 + '|' + this.unit2;
|
|
} else
|
|
return this.unit1;
|
|
} else
|
|
return "";
|
|
},
|
|
},
|
|
mounted() {
|
|
this.setvalue(this.value || this.modelValue);
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.tvalue,
|
|
unit1: this.unit1,
|
|
unit2: this.unit2,
|
|
unit3: this.unit3,
|
|
num12: this.num12,
|
|
num23: this.num23,
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
setvalue(val, old) {
|
|
var us = val.split('|'); // 瓶 瓶|24|盒 瓶|24|盒|20|箱
|
|
this.unit1 = '';
|
|
this.unit2 = '';
|
|
this.unit3 = '';
|
|
this.num12 = '';
|
|
this.num23 = '';
|
|
if (this.unit1 != us[0])
|
|
this.unit1 = us[0];
|
|
if (us.length < 3)
|
|
return;
|
|
var num = this.toint(us[1]);
|
|
if (num <= 0 || !us[2])
|
|
return;
|
|
if (this.num12 != num)
|
|
this.num12 = num;
|
|
if (this.unit2 != us[2])
|
|
this.unit2 = us[2];
|
|
if (us.length < 5)
|
|
return;
|
|
num = this.toint(us[3]);
|
|
if (num <= 0 || !us[4])
|
|
return;
|
|
if (this.num23 != num)
|
|
this.num23 = num;
|
|
if (this.unit3 != us[4])
|
|
this.unit3 = us[4];
|
|
},
|
|
chg(e) {
|
|
this.$emit('update:modelValue', this.tvalue);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'input',
|
|
value: this.tvalue,
|
|
unit1: this.unit1,
|
|
unit2: this.unit2,
|
|
unit3: this.unit3,
|
|
num12: this.num12,
|
|
num23: this.num23,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |