301 lines
6.7 KiB
Vue
301 lines
6.7 KiB
Vue
<template>
|
|
<view style="width:100%;">
|
|
<input type="hidden" :maxlength="-1" :name="name" :value="tkvs.value" style="display:none;" />
|
|
<template v-if="hasmore">
|
|
<checkbox-group :name="name+'_name'" style="display:none;">
|
|
<checkbox v-for="(item,index) in tkvs.vals" :key="index" :value="item.name+''" checked />
|
|
</checkbox-group>
|
|
</template>
|
|
<template v-if="hasmore && moreno">
|
|
<checkbox-group :name="name+'_noname'" style="display:none;">
|
|
<checkbox v-for="(item,index) in tkvs.novals" :key="index" :value="item.name+''" checked />
|
|
</checkbox-group>
|
|
</template>
|
|
<template v-if="moreno">
|
|
<checkbox-group :name="name+'_id'" style="display:none;">
|
|
<checkbox v-for="(item,index) in tkvs.vals" :key="index" :value="item.id+''" checked />
|
|
</checkbox-group>
|
|
<checkbox-group :name="name+'_no'" style="display:none;">
|
|
<checkbox v-for="(item,index) in tkvs.novals" :key="index" :value="item.id+''" checked />
|
|
</checkbox-group>
|
|
</template>
|
|
<view v-if="innerrang.length==0" :style="{color:'var(--bg6)',textAlign:left?'left':''}">无选项</view>
|
|
<radio-group class="_gp" :class="{'_line':line,'_left':left,'_itemright':itemright}">
|
|
<view @tap="chgitem(item)" class="_item" v-for="(item,index) in innerrang" :key="index">
|
|
<ciy-checkitem style="pointer-events: none;" sq :disabled="disabled" :tag="(byname?item.name:item.id)+''" :value="tkvs.ids.indexOf((byname?item.name:item.id)+'') > -1"></ciy-checkitem>
|
|
<view :style="{color:disabled?'var(--txt1)':''}">{{item.name}}</view>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._gp {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
._gp._left {
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
._gp._left ._item {
|
|
flex-direction: row;
|
|
}
|
|
|
|
._gp ._item {
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
padding: 0.5em;
|
|
min-width: 7em;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
._gp._itemright ._item {
|
|
justify-content: flex-start;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
._gp._line ._item {
|
|
width: 100%;
|
|
white-space: normal;
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
byname: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bin: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
chkuse: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
range: {
|
|
type: [String, Array],
|
|
default: []
|
|
},
|
|
moreno: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
itemright: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
line: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
v: ''
|
|
};
|
|
},
|
|
watch: {
|
|
tkvs: {
|
|
handler(newD, oldD) {
|
|
if (this.from && newD.value == oldD.value)
|
|
return;
|
|
if (this.innerrang.length == 0)
|
|
return;
|
|
if (!this.from)
|
|
this.from = 'init';
|
|
else if (this.from == 'init')
|
|
this.from = 'check';
|
|
|
|
this.$emit('update:modelValue', newD.value);
|
|
if (this.from != 'init' || this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: this.from,
|
|
value: newD.value,
|
|
idvalue: newD.vals,
|
|
novalue: newD.novals
|
|
});
|
|
}
|
|
}
|
|
},
|
|
value: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'value';
|
|
},
|
|
immediate: true
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'modelValue';
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
computed: {
|
|
innerrang() {
|
|
if (typeof(this.range) == 'string') {
|
|
const lis = this.range.split(',');
|
|
var lst = [];
|
|
for (let i = 0; i < lis.length; i++) {
|
|
const ls = lis[i].split(':');
|
|
if (ls.length < 2)
|
|
continue;
|
|
lst.push({
|
|
id: ls[0],
|
|
name: ls[1]
|
|
});
|
|
}
|
|
return lst;
|
|
}
|
|
let range = [];
|
|
for (let i = 0; i < this.range.length; i++) {
|
|
if (this.chkuse && this.range[i].isuse == 2)
|
|
continue;
|
|
range.push(this.range[i]);
|
|
}
|
|
return range;
|
|
},
|
|
tkvs() {
|
|
var val = ''; //id/name数组
|
|
if (this.v == 'modelValue') {
|
|
if (typeof(this.modelValue) == 'number')
|
|
val = this.modelValue + '';
|
|
else if (this.modelValue)
|
|
val = this.modelValue;
|
|
} else if (this.v == 'value') {
|
|
if (typeof(this.value) == 'number')
|
|
val = this.value + '';
|
|
else if (this.value)
|
|
val = this.value;
|
|
} else if (this.v instanceof Array) {
|
|
val = this.v;
|
|
}
|
|
if (!(val instanceof Array)) {
|
|
if (this.bin) {
|
|
var values = [];
|
|
var ibin = parseInt(val);
|
|
for (var tt = 0; tt < 64; tt++) {
|
|
if (ibin & Math.pow(2, tt))
|
|
values.push((tt + 1) + '');
|
|
}
|
|
val = values;
|
|
} else {
|
|
val = val.split(',');
|
|
}
|
|
}
|
|
var kvs = {
|
|
ids: [],
|
|
vals: [],
|
|
novals: []
|
|
};
|
|
if (this.byname) {
|
|
for (var i in this.innerrang) {
|
|
if (val.indexOf(this.innerrang[i].name + '') > -1) {
|
|
kvs.ids.push(this.innerrang[i].name + '');
|
|
kvs.vals.push({
|
|
...this.innerrang[i]
|
|
});
|
|
} else {
|
|
kvs.novals.push({
|
|
...this.innerrang[i]
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
for (var i in this.innerrang) {
|
|
if (val.indexOf(this.innerrang[i].id + '') > -1) {
|
|
kvs.ids.push(this.innerrang[i].id + '');
|
|
kvs.vals.push({
|
|
...this.innerrang[i]
|
|
});
|
|
} else {
|
|
kvs.novals.push({
|
|
...this.innerrang[i]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
if (this.bin) {
|
|
var bval = 0;
|
|
for (var bi in kvs.ids) {
|
|
var bc = this.toint(kvs.ids[bi]);
|
|
if (bc < 1 || bc > 63)
|
|
continue;
|
|
bval += Math.pow(2, (bc - 1));
|
|
}
|
|
kvs.value = bval;
|
|
} else {
|
|
kvs.value = '';
|
|
if (kvs.ids.length > 0)
|
|
kvs.value = ',' + kvs.ids.join(',') + ',';
|
|
}
|
|
return kvs;
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
chgitem(itm) {
|
|
if (this.disabled)
|
|
return;
|
|
this.v = this.tkvs.ids;
|
|
if (this.byname) {
|
|
if (this.tkvs.ids.includes(itm.name + '')) {
|
|
var idx = this.v.indexOf(itm.name + '');
|
|
if (idx > -1)
|
|
delete this.v[idx];
|
|
} else {
|
|
this.v.push(itm.name + '');
|
|
}
|
|
} else {
|
|
if (this.tkvs.ids.includes(itm.id + '')) {
|
|
var idx = this.v.indexOf(itm.id + '');
|
|
if (idx > -1)
|
|
delete this.v[idx];
|
|
} else {
|
|
this.v.push(itm.id + '');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |