|
|
@@ -1,116 +0,0 @@
|
|
|
-<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 || loadError">
|
|
|
- <view class="picker" :class="{ 'picker-disabled': disabled || loadError, 'picker-error': loadError }">
|
|
|
- <text v-if="loading" class="status-text">加载中...</text>
|
|
|
- <text v-else-if="loadError" class="status-text error-text" @tap.stop="loadTypes">加载失败,点击重试</text>
|
|
|
- <text v-else>{{ selectedName || '请选择关系类型' }}</text>
|
|
|
- </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,
|
|
|
- loadError: 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
|
|
|
- this.loadError = false
|
|
|
- try {
|
|
|
- var res = await getRelationshipTypes()
|
|
|
- if (res.code === 200 && res.data) {
|
|
|
- this.relationshipTypes = res.data
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.error('加载关系类型失败', e)
|
|
|
- this.loadError = true
|
|
|
- } 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;
|
|
|
-}
|
|
|
-.status-text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-.error-text {
|
|
|
- color: #F97316;
|
|
|
-}
|
|
|
-.picker-error {
|
|
|
- border-color: #F97316;
|
|
|
-}
|
|
|
-</style>
|