<template> <div class='disease-select'> <div class='label-title mb-4'>请选择慢病类型</div> <div v-for="(item, index) in store.getDict('CP00117')" :key='index' :class="['flex justify-between items-center text-16 mb-3 disease-checked', { 'disease-checked-active': isSelect(item)}, ]" @click='onSelect(item)'> <span>{{ item.name }}</span> </div> <div class='warn-error' v-if='showWarn'>请选择</div> </div> </template> <script> import { useStore } from '@/doctor/store/index.js' export default { props: { infoValue: String }, data() { return { store: useStore(), // 选中的疾病类型 innerValue: [], //显示校验 showWarn: false } }, watch: { infoValue: { handler(value) { if (value) { this.innerValue = value.split(',') } }, immediate: true } }, created() { this.init() }, methods: { init() { if (!(this.innerValue && this.innerValue.length)) { this.innerValue = this.store.getDict('CP00117').map(e => e.value) } }, // 是否选中 isSelect(item) { return this.innerValue.includes(item.value) }, onSelect(val) { if (this.innerValue.includes(val.value)) { this.innerValue = this.innerValue.filter(e => e !== val.value) } else { this.innerValue.push(val.value) } if (this.innerValue && this.innerValue.length) { this.showWarn = false } else { this.showWarn = true } }, onSubmit() { return new Promise((resolve, reject) => { if (!(this.innerValue && this.innerValue.length)) { this.showWarn = true return } resolve(this.innerValue) }) } } } </script> <style lang='less' scoped> .label-title { font-size: 14px; color: #262626; font-weight: 500; &::after { content: "*"; color: red; font-weight: bold; margin-left: 4px; } } .no-req-label { font-size: 13px; color: #595959; font-weight: 500; } .disease-checked { border: 1px solid #BFBFBF; border-radius: 40px; color: #595959; background-color: #fff; padding: 10px 16px; line-height: 22.4px; } .disease-checked-active { color: var(--van-primary-color); border-color: var(--van-primary-color); } .disease-checked-disabled { border-color: #EFF2F7; background-color: #EFF2F7; } .warn-error { color: #FF4D4F; } </style>