cfc/cfc-frontend/components/RelationshipPicker.vue

<template>
  <view class="relationship-picker-wrap">
    <view class="form-item required" v-if="showLabel">
      <text class="label"><text class="required-mark">*</text>关系类型</text>
    </view>
    <picker :range="typeNames" @change="onChange" :disabled="disabled">
      <view class="picker" :class="{ 'picker-disabled': disabled }">
        {{ selectedName || '请选择关系类型' }}
      </view>
    </picker>
  </view>
</template>

<script>
import { getRelationshipTypes } from '../utils/api.js'

export default {
  name: 'RelationshipPicker',
  props: {
    value: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    showLabel: { type: Boolean, default: true }
  },
  data() {
    return {
      relationshipTypes: [],
      loading: false
    }
  },
  computed: {
    typeNames() {
      var names = []
      for (var i = 0; i < this.relationshipTypes.length; i++) {
        names.push(this.relationshipTypes[i].typeName)
      }
      return names
    },
    selectedName() {
      if (!this.value) return ''
      for (var i = 0; i < this.relationshipTypes.length; i++) {
        if (this.relationshipTypes[i].typeKey === this.value) {
          return this.relationshipTypes[i].typeName
        }
      }
      return ''
    }
  },
  mounted() {
    this.loadTypes()
  },
  methods: {
    async loadTypes() {
      this.loading = true
      try {
        var res = await getRelationshipTypes()
        if (res.code === 200 && res.data) {
          this.relationshipTypes = res.data
        }
      } catch (e) {
        console.error('加载关系类型失败', e)
      } finally {
        this.loading = false
      }
    },
    onChange(e) {
      var idx = e.detail.value
      if (idx >= 0 && idx < this.relationshipTypes.length) {
        this.$emit('input', this.relationshipTypes[idx].typeKey)
      }
    }
  }
}
</script>

<style scoped>
.picker {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
}
.picker-disabled {
  background: #f5f5f5;
  color: #999;
}
.form-item {
  margin-bottom: 10rpx;
}
.form-item .label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}
.required-mark {
  color: #F97316;
  margin-right: 4rpx;
}
</style>