48 lines
1.8 KiB
Vue
48 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<common-cell :name="name" :required="required">
|
||
|
|
<view class="joint-row">
|
||
|
|
<picker mode="selector" :range="jointOptions" :disabled="disableChange" @change="changeJoint">
|
||
|
|
<view class="joint-picker" :class="jointType ? '' : 'form__placeholder'">{{ jointType || '请选择关节类型' }}</view>
|
||
|
|
</picker>
|
||
|
|
<picker mode="selector" :range="jointSideOptions" :disabled="disableChange" @change="changeSide">
|
||
|
|
<view class="joint-picker" :class="jointSide ? '' : 'form__placeholder'">{{ jointSide || '请选择侧别' }}</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</common-cell>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import commonCell from '../common-cell.vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: { type: Object, default: () => ({}) },
|
||
|
|
name: { default: '' },
|
||
|
|
title: { default: '' },
|
||
|
|
range: { type: Array, default: () => [] },
|
||
|
|
required: { type: Boolean, default: false },
|
||
|
|
disableChange: { type: Boolean, default: false },
|
||
|
|
});
|
||
|
|
|
||
|
|
const jointOptions = computed(() => props.range.length ? props.range : ['膝关节', '髋关节']);
|
||
|
|
const jointSideOptions = ['左侧', '右侧', '双侧'];
|
||
|
|
const jointType = computed(() => props.form?.[props.title] || '');
|
||
|
|
const jointSide = computed(() => props.form?.jointSide || '');
|
||
|
|
|
||
|
|
function changeJoint(event) {
|
||
|
|
emits('change', { title: props.title, value: jointOptions.value[event.detail.value] });
|
||
|
|
}
|
||
|
|
function changeSide(event) {
|
||
|
|
emits('change', { title: 'jointSide', value: jointSideOptions[event.detail.value] });
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import '../cell-style.css';
|
||
|
|
|
||
|
|
.joint-row { display: flex; gap: 16rpx; width: 100%; }
|
||
|
|
.joint-row picker { flex: 1; min-width: 0; }
|
||
|
|
.joint-picker { padding: 12rpx 16rpx; border: 1rpx solid #dcdfe6; border-radius: 8rpx; font-size: 28rpx; }
|
||
|
|
</style>
|