诊断 疾病选择

src/assets/css/atomic.less

@@ -79,6 +79,7 @@
 
 // 字体大小
 .text-16 { font-size: 16px; }
+.text-14 { font-size: 14px; }
 .text-12 { font-size: 12px; }
 .text-start { text-align: start; }
 .text-center { text-align: center; }

src/doctor/Doctor.vue

@@ -57,7 +57,7 @@ export default {
             if (!token) {
                 token = sessionStorage.getItem('token')
                 if (process.env.NODE_ENV !== 'production') {
-                    token = '3d5995bc-f56f-417d-8c70-b8c81fb0ffc2'
+                    token = '6cc7a6e9-e78f-49f2-947b-91fc3e163f55'
                 }
             }
             if (token) {

src/doctor/diagnose/form/DiagnoseForm.vue

 <template>
     <div class="h-full flex flex-col diagnose-form">
-        <DocNavBar :title="`${id ? '修改' : '新增'}慢病诊断`" class="shrink-0"></DocNavBar>
+        <DocNavBar :title="`${id ? '修改' : '新增'}慢病诊断`" class="shrink-0"
+            :backFunc="onBack"></DocNavBar>
+        <div class="p-4 overflow-y-auto grow" ref="all">
+            <DiseaseSelect v-if="step == 1" ref="DiseaseSelect"/>
+            <archiveCommon :info="baseInfo" v-else-if="step == 2"></archiveCommon>
+            <FormCont v-else-if="step == 3"/>
+        </div>
+        <div class="shrink-0">
+            <div class='bottom-small-line'></div>
+            <div class='px-5 py-2 grow flex justify-between'>
+                <template v-if='step == 1'>
+                    <van-button type='primary' block round
+                        @click='toNext'>下一步</van-button>
+                </template>
+                <template v-else-if="step == 3">
+                    <van-button type='primary' block round
+                        @click='submit'>提交</van-button>
+                </template>
+                <template v-else>
+                    <van-button type='primary' round plain style='width: 48%'
+                        @click='toPrev'>上一步
+                    </van-button>
+                    <van-button type='primary' round style='width: 48%'
+                        @click='toNext'>下一步
+                    </van-button>
+                </template>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
+import archiveCommon from '@/doctor/components/archiveCommon/archiveCommon.vue'
+import DiseaseSelect from './DiseaseSelect.vue'
+import FormCont from './FormCont.vue'
+import { getChronicResidentsId } from '@/api/doctor/generalFU'
+import { showSuccessToast } from 'vant'
 
 export default {
     components: {
-        DocNavBar
+        DocNavBar,
+        archiveCommon,
+        DiseaseSelect,
+        FormCont
+    },
+    data() {
+        return {
+            step: 1,
+            // 患者基础信息
+            baseInfo: {}
+        }
     },
     computed: {
         id() {
@@ -21,6 +63,54 @@ export default {
         residentInfoId() {
             return this.$route.query.residentInfoId
         }
+    },
+    created() {
+        this.init()
+    },
+    methods: {
+        async init() {
+            if (this.id) {
+
+            } else {
+                let res = await getChronicResidentsId(this.residentInfoId)
+                this.baseInfo = res.data || {}
+            }
+        },
+        submit() {
+            showSuccessToast('提交成功')
+            setTimeout(() => {
+                this.$router.replace({
+                    path: '/doctor/workbench'
+                })
+            }, 600)
+        },
+        // 上一步
+        toPrev() {
+            this.onStep(this.step -1)
+        },
+        async toNext() {
+            try {
+                if (this.step == 1) {
+                    const diseaseType = await this.$refs.DiseaseSelect.submit()
+                    console.log(diseaseType)
+                }
+            this.onStep(this.step + 1)
+            } catch (e) {
+                console.warn(e)
+            }
+            
+        },
+        onStep(val) {
+            this.$refs.all.scrollTo(0, 0)
+            this.step = val
+        },
+        onBack() {
+            if (this.step == 1) {
+                this.$router.back()
+            } else {
+                this.step--
+            }
+        }
     }
 }
 </script>

src/doctor/diagnose/form/DiseaseSelect.vue

+<template>
+    <div class="disease-select">
+        <div class="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': item.value == diseaseType },
+                { 'disease-checked-disabled': excludeType.includes(item.value) }
+            ]"
+            @click="onSelect(item)">
+            <span>{{ item.name }}</span>
+            <span class="text-14 text-primary">
+                <span v-if="excludeType.includes(item.value)">已确诊</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useStore } from '@/doctor/store/index.js'
+import { showToast } from 'vant'
+
+export default {
+    data() {
+        return {
+            store: useStore(),
+            // 排除已选择的疾病
+            excludeType: [1],
+            // 选中的疾病类型
+            diseaseType: null
+        }
+    },
+    methods: {
+        onSelect(item) {
+            if (this.excludeType.includes(item.value)) return
+            this.diseaseType = item.value
+        },
+        submit() {
+            return new Promise((resolve, reject) => {
+                if (!this.diseaseType) {
+                    showToast('请选择慢病类型')
+                    reject('请选择慢病类型')
+                    return
+                }
+                resolve(this.diseaseType)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.disease-checked {
+    border: 1px solid #BFBFBF;
+    border-radius: 40px;
+    color: #595959;
+    background-color: #fff;
+    padding: 10px 12px;
+}
+.disease-checked-active {
+    color: var(--van-primary-color);
+    border-color: var(--van-primary-color);
+}
+.disease-checked-disabled {
+    border-color: #EFF2F7;
+    background-color: #EFF2F7;
+}
+</style>

src/doctor/diagnose/form/FormCont.vue

+<template>
+    <div class="diagnose-form-cont">
+        form
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>