慢综 医生端 新增通用随访表单

src/doctor/followUp/generalFU/form/CommonBottom.vue

 <template>
-<div>底部</div>
+    <div>
+        <van-form ref='form'>
+            <van-cell-group inset>
+                <div class='no-req-label'>随访单位</div>
+                <van-field
+                    v-model='form.visitUnitName'
+                    is-link
+                    readonly
+                    placeholder='随访单位'
+                    class='input-back mt-2 form-input'
+                    @click="showPopup = true"
+                />
+                <van-popup v-model:show="showPopup" position="bottom" :style="{ height: '40%' }">
+                    <van-search
+                        v-model="searchText"
+                        :show-action="false"
+                        placeholder="搜索"
+                        @search="onSearch"
+                    />
+                    <van-cell-group>
+                        <van-cell v-for="item in searchResults" :key="item" :title="item" />
+                    </van-cell-group>
+                </van-popup>
+                <div class='no-req-label mt-5'>随访科室</div>
+                <van-field
+                    v-model='form.visitOfficeName'
+                    is-link
+                    disabled
+                    placeholder='随访科室'
+                    class='input-back mt-2 form-input'
+                />
+                <div class='no-req-label mt-5'>随访医生</div>
+                <van-field
+                    v-model='form.visitDoctorName'
+                    is-link
+                    disabled
+                    placeholder='随访医生'
+                    class='input-back mt-2 form-input'
+                />
+            </van-cell-group>
+        </van-form>
+    </div>
 </template>
 
 <script>
+import dayjs from 'dayjs'
+import { useStore } from '@/doctor/store'
+
 export default {
-    name: 'CommonBottom'
+    name: 'CommonBottom',
+    props: {
+        info: {
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            store: useStore(),
+            authInfo: {},
+            showPopup: false,
+            searchText: undefined,
+            searchResults: [],
+            form: {},
+            rules: {}
+        }
+    },
+    watch: {
+        'info': {
+            handler() {
+                this.form = this.setForm(this.info)
+            },
+            immediate: true
+        }
+    },
+    // computed: {
+    //     authInfo() {
+    //         return store.state.authInfo
+    //     }
+    // },
+    methods: {
+        setForm(info) {
+            const form = {
+                visitDate: new dayjs(),
+                createDate: new dayjs(),
+                // 随访单位
+                visitUnitId: this.authInfo.unitId,
+                visitUnitName: this.authInfo.unitName,
+                // 随访科室
+                visitOfficeId: this.authInfo.officeId,
+                visitOfficeName: this.authInfo.officeName,
+                // 随访医生
+                visitDoctorId: this.authInfo.relationId,
+                visitDoctorName: this.authInfo.nickName,
+                // 录入单位
+                createUnitId: this.authInfo.unitId,
+                createUnitName: this.authInfo.unitName,
+                // 录入科室
+                createOfficeId: this.authInfo.officeId,
+                createOfficeName: this.authInfo.officeName,
+                // 录入医生
+                createDoctorId: this.authInfo.relationId,
+                createDoctorName: this.authInfo.nickName
+            }
+            Reflect.ownKeys(form).forEach(key => {
+                if (info[key] != undefined) {
+                    form[key] = info[key]
+                }
+            })
+            return form
+        },
+        onSearch() {
+            debugger
+        }
+    }
 }
 </script>
 
-<style scoped>
+<style scoped lang='less'>
+.title {
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.label-title {
+    font-size: 13px;
+    color: #595959;
+    font-weight: 500;
+
+    &::after {
+        content: "*";
+        color: red;
+        font-weight: bold;
+        margin-left: 4px;
+    }
+}
+
+.no-req-label {
+    font-size: 13px;
+    color: #595959;
+    font-weight: 500;
+}
+
+.form-input {
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+
+.input-back {
+    background: #FAFAFA;
+}
+
+.tel-back {
+    background: #F5F5F5;
+    padding: 8px;
+    border-radius: 0px 0px 8px 8px;
+}
+
+.tel {
+    background: #FFFFFF;
+    padding: 8px;
+    border-radius: 8px;
+}
+
+.tel-label {
+    color: #607FF0;
+    font-weight: bold;
+}
 
+.p-12-0 {
+    padding: 12px 0px;
+}
+
+:deep(.van-cell-group--inset) {
+    overflow: visible;
+}
+
+:deep(.van-cell) {
+    overflow: visible;
+}
+
+:deep(.van-field__error-message) {
+    position: absolute;
+}
+
+:deep(.van-cell:after) {
+    border-bottom: 0px;
+}
 </style>
\ No newline at end of file