c5_labsci/fapp/ciyon_ap/components/ciy-radio/ciy-radio.vue

<template>
	<view style="width:100%;">
		<input type="hidden" :name="name" :value="tkv.id" style="display:none;" />
		<template v-if="hasmore">
			<input type="hidden" :name="name+'_name'" :value="tkv.name" style="display:none;" />
		</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="chkitem(item)" class="_item" v-for="(item,index) in innerrang" :key="index">
				<ciy-checkitem style="pointer-events: none;" :disabled="disabled" :tag="item.id+''" :value="tkv.id == item.id"></ciy-checkitem>
				<view :style="{color:disabled?'var(--txt1)':''}">{{item.name}}</view>
			</view>
		</radio-group>
	</view>
</template>

<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: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			chkuse: {
				type: Boolean,
				default: false
			},
			range: {
				type: [String, Array],
				default: []
			},
			left: {
				type: Boolean,
				default: false
			},
			itemright: {
				type: Boolean,
				default: false
			},
			line: {
				type: Boolean,
				default: false
			},
			byname: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				v: '',
				valuearr: {
					id: 0,
					name: ''
				},
			};
		},
		watch: {
			tkv: {
				handler(newD, oldD) {
					if (this.from && newD.id == oldD.id)
						return;
					if (!this.from)
						this.from = 'init';
					else if (this.from == 'init') {
						this.from = 'check';
					}
					if (this.from != 'init') {
						if (this.byname)
							this.$emit('update:modelValue', newD.name);
						else
							this.$emit('update:modelValue', newD.id);
					}
					if (this.from != 'init' || this.initevent) {
						this.$emit('change', {
							name: this.name,
							from: this.from,
							value: {
								id: newD.id,
								name: newD.name
							}
						});
					}
				},
				immediate: true
			},
			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;
			},
			tkv() {
				var val = '';
				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 {
					val = this.v;
				}
				if (this.byname) {
					for (var i in this.innerrang) {
						if (this.innerrang[i].name == val)
							return {
								...this.innerrang[i]
							};
					}
				} else {
					for (var i in this.innerrang) {
						if (this.innerrang[i].id == val)
							return {
								...this.innerrang[i]
							};
					}
				}
				return {
					id: 0,
					name: ''
				};
			}
		},
		mounted() {},
		methods: {
			chkitem(itm) {
				if (this.disabled)
					return;
				this.v = itm.id;
			}
		}
	}
</script>

<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;
		min-width: 7em;
		padding: 0.5em;
		flex-direction: row-reverse;
	}

	._gp._itemright ._item {
		justify-content: flex-start;
		flex-direction: row-reverse;
	}

	._gp._line ._item {
		width: 100%;
		white-space: normal;
	}
</style>