tjy-uniapp/src/pages/unClaim/components/query/CheckNatureCom.vue

<template>
  <view class="check-nature-box">
    <view class="title" :style="textStyle">检验性质：</view>
    <wd-picker
      class="nature-picker"
      v-model="selectCode"
      :columns="columns"
      @confirm="onConfirm"
    >
      <view class="nature-input">
        <text :class="['nature-text', { 'nature-text--placeholder': !displayLabel }]">
          {{ displayLabel || '请选择' }}
        </text>
      </view>
    </wd-picker>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

interface Props {
  type: string
  textStyle?: any
}

const props = defineProps<Props>()

const emit = defineEmits<{
  change: [text: number, type: string]
}>()

const selectCode = ref<number | undefined>(undefined)

const columns = [
  { label: '定期检验', value: 100 },
  { label: '年度检查', value: 200 },
  // { label: '超年限检验', value: 300 },
]

const displayLabel = computed(() => {
  if (selectCode.value == null) return ''
  const item = columns.find((c) => c.value === selectCode.value)
  return item ? item.label : ''
})

const onConfirm = ({ value }: { value: number }) => {
  if (value) {
    emit('change', value, props.type)
  }
}

defineExpose({
  reset: () => {
    selectCode.value = undefined
  },
  inputContent: computed(() => selectCode.value || undefined),
})
</script>

<style lang="scss" scoped>
.check-nature-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  flex-shrink: 0;
  width: 60px;
  font-size: 12px;
  color: rgb(51, 51, 51);
  text-align: right;
}

.nature-picker {
  flex: 1;
  min-width: 0;
}

.nature-input {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.nature-text {
  font-size: 12px;
  color: rgb(51, 51, 51);

  &--placeholder {
    color: rgba(136, 136, 136, 1);
  }
}
</style>