医生端小程序 v1.2 1、复筛表单

src/doctor/screening/second/DiseaseSelect.vue

+<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'
+import { showToast } from 'vant'
+
+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>

src/doctor/screening/second/SecondForm.vue

@@ -6,12 +6,18 @@
                             v-show='step ==1'
                             ref='baseInfo'
             ></archive-common>
+            <DiseaseSelect
+                :infoValue='info.diseaseArrays'
+                v-show='step == 2'
+                ref='diseaseInfo'
+            ></DiseaseSelect>
             <form-cont :info='info'
-                       v-show='step == 2'
+                       :disease-arrays-info='diseaseArraysInfo'
+                       v-show='step == 3'
                        ref='formInfo'
             ></form-cont>
             <result :residentInfoId="residentInfoId"
-                    v-show='step == 3'
+                    v-show='step == 4'
             ></result>
         </div>
         <div class='bottom-small-line'></div>
@@ -30,8 +36,16 @@
                             @click='toNext(3)'>下一步
                 </van-button>
             </div>
+            <div class='px-5  flex align-center justify-around' v-if='step == 3'>
+                <van-button type='primary' round plain style='width: 44%'
+                            @click='toNext(2)'>上一步
+                </van-button>
+                <van-button type='primary' round style='width: 44%'
+                            @click='toNext(4)'>下一步
+                </van-button>
+            </div>
 
-            <div class='px-5  grow flex flex-col justify-end' v-if='step == 2'>
+            <div class='px-5  grow flex flex-col justify-end' v-if='step == 4'>
                 <van-button type='primary' block round
                             @click='onsubmit'>提交
                 </van-button>
@@ -46,9 +60,11 @@ import ArchiveCommon from '@/doctor/components/archiveCommon/archiveCommon'
 import { fetchCurrencyById, getChronicResidentsId, getResidentWX } from '@/api/doctor/generalFU'
 import FormCont from '@/doctor/screening/second/FormCont'
 import Result from '@/doctor/screening/second/Result'
+import DiseaseSelect from '@/doctor/screening/second/DiseaseSelect'
 
 export default {
     components: {
+        DiseaseSelect,
         Result,
         FormCont,
         ArchiveCommon,
@@ -57,7 +73,8 @@ export default {
     data() {
       return {
           step: 1,
-          info: {}
+          info: {},
+          diseaseArraysInfo: []
       }
     },
     computed: {
@@ -107,11 +124,14 @@ export default {
         async toNext(val) {
             this.$refs.all.scrollTo(0, 0)
             if (val == 2) {
-                this.firstForm = await this.$refs.baseInfo.onSubmit()
+                 await this.$refs.baseInfo.onSubmit()
+            }
+            if (val == 3) {
+                this.diseaseArraysInfo = await this.$refs.diseaseInfo.onSubmit() || []
+            }
+            if (val == 4) {
+                await this.$refs.formInfo.onSubmit()
             }
-            // if (val == 3) {
-            //     await this.$refs.formInfo.onSubmit()
-            // }
             this.step = val
         },
         //提交所有表单