patient form

src/App.vue

@@ -1,6 +1,9 @@
 <style lang="scss">
 	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 	@import "uview-ui/index.scss";
+	body {
+		background-color: $u-bg-color;
+	}
 </style>
 <script>
 	export default {
@@ -15,9 +18,3 @@
 		}
 	}
 </script>
-
-<style lang="scss">
-	body {
-		background-color: $u-bg-color;
-	}
-</style>

src/components/select-admin-user.vue

@@ -1,5 +1,5 @@
 <template>
-   <u-popup :show="show" mode="right" @close="close" @open="open">
+   <u-popup :show="show" mode="right" :safeAreaInsetTop="true" @close="close" @open="open">
         <u-cell-group>
             <u-cell
                 v-for="(item, index) in list"
@@ -7,7 +7,7 @@
                 :title="item.name"
                 :icon="item.avatar"
                 :name="index"
-                isLink
+                clickable
                 @click="click"
             />
         </u-cell-group>
@@ -49,6 +49,6 @@ export default {
 </script>
 <style scoped>
     .u-cell-group {
-        margin-top: 20px;
+        margin-top: 40px;
     }
 </style>

src/pages/patient/detail.vue

@@ -1,13 +1,225 @@
 <template>
-
+    <view class="page">
+        <u-cell-group :border="false">
+            <u-cell
+                title="姓名"
+                :value="info.name"
+                isLink
+                rightIcon="edit-pen"
+                @click="openModal('姓名', 'name')"
+            />
+            <u-cell
+                title="性别"
+                :value="info.sex_text"
+                isLink
+                rightIcon="edit-pen"
+                @click="toggleGender"
+            />
+            <u-cell
+                title="联系方式"
+                :value="info.phone"
+                isLink
+                rightIcon="edit-pen"
+                @click="openModal('联系方式', 'phone')"
+            />
+            <u-cell
+                title="地址"
+                :value="info.address"
+                clickable
+                isLink
+                rightIcon="edit-pen"
+                @click="openModal('地址', 'address')"
+            />
+            <u-cell
+                title="出生年月"
+                :value="info.birthday | date('yyyy-MM-dd')"
+                isLink
+                rightIcon="edit-pen"
+                @click="toggleBirthday('birthday')"
+            />
+            <u-cell
+                title="初诊时间"
+                :value="info.treat_at | date('yyyy-MM-dd')"
+                isLink
+                rightIcon="edit-pen"
+                @click="toggleBirthday('treat_at')"
+            />
+            <u-cell
+                title="初诊医生"
+                :value="info.doctor?info.doctor.name : ''"
+                isLink
+                rightIcon="edit-pen"
+                @click="opendDoctor"
+            />
+            <u-cell
+                title="病情描述"
+                :label="info.illness"
+                isLink
+                rightIcon="edit-pen"
+                @click="openModal('病情描述', 'illness', 'textarea')"
+            />
+        </u-cell-group>
+        <div class="btn">
+            <u-button text="病历记录" type="success" />
+        </div>
+        <u-modal
+            :show="modal.show"
+            :title="modal.title"
+            :showCancelButton="true"
+            :closeOnClickOverlay="true"
+            :asyncClose="true"
+            @confirm="confirmModal"
+            @cancel="closeModal"
+            @close="closeModal"
+        >
+            <u--input v-if="modal.type == 'text'" v-model="modal.value" border="surround" />
+            <u--textarea v-if="modal.type == 'textarea'" v-model="modal.value" :showConfirmBar="false" />
+        </u-modal>
+        <u-action-sheet
+            title="性别"
+            :show="genderSheet.show"
+            :actions="gender.options"
+            :closeOnClickOverlay="true"
+            @close="toggleGender"
+            @select="selectGender"
+        />
+        <u-datetime-picker
+            v-model="datePicker.value"
+            mode="date"
+            :show="datePicker.show"
+            :closeOnClickOverlay="true"
+            :minDate="datePicker.minDate"
+            @close="toggleBirthday"
+            @cancel="toggleBirthday"
+            @confirm="selectBirthday"
+        />
+        <select-admin-user ref="select-admin-user" @select="selectDoctor" />
+    </view>
 </template>
 
 <script>
-export default {
+import gender from '../../enums/gender'
+import SelectAdminUser from '../../components/select-admin-user'
 
+export default {
+    components: {SelectAdminUser},
+    data() {
+        return {
+            id: '',
+            info: {},
+            modal: {
+                type: 'text',
+                show: false,
+                title: '',
+                key: '',
+                value: ''
+            },
+            gender: gender,
+            genderSheet: {
+                show: false,
+            },
+            datePicker: {
+                show: false,
+                name: '',
+                value: (new Date).getTime(),
+                minDate: (new Date('1900-1-1')).getTime()
+            },
+        }
+    },
+    onLoad(e) {
+        this.id = e.id
+        this.loadData()
+    },
+    methods: {
+        loadData() {
+            if (!this.id) {
+                return
+            }
+            uni.showLoading()
+            this.$ajax.get(`/admin-api/patient/${this.id}`, {_action: 'getData'}).then(res => {
+                if (res.status == 0) {
+                    this.info = res.data
+                    uni.setNavigationBarTitle({ title: this.info.name })
+                }
+            })
+        },
+        openModal(title, name, type) {
+            this.modal.type = type ? type : 'text'
+            this.modal.title = title
+            this.modal.key = name
+            this.modal.show = true
+            this.modal.value = this.info[name]
+        },
+        confirmModal() {
+            const key = this.modal.key
+            const value = this.modal.value
+            const params = { id: this.id }
+            params[key] = value
+            this.$ajax.put(`/admin-api/patient/${this.id}`, params).then(res => {
+                this.modal.show = false
+                if (res.status == 0) {
+                    this.info[key] = value
+                }
+            })
+        },
+        closeModal() {
+            this.modal.show = false
+        },
+        toggleGender() {
+            this.genderSheet.show = !this.genderSheet.show
+        },
+        selectGender(e) {
+            this.$ajax.put(`/admin-api/patient/${this.id}`, {id: this.id, sex: e.value}).then(res => {
+                if (res.status == 0) {
+                    this.info.sex = e.value
+                    this.info.sex_text = e.name
+                }
+            })
+        },
+        toggleBirthday(name) {
+            if (name) {
+                this.datePicker.name = name
+                this.datePicker.value = this.info[name] ? Math.floor(this.info[name] * 1000) : (new Date).getTime()
+            }
+            this.datePicker.show = !this.datePicker.show
+        },
+        selectBirthday(e) {
+            const time = Math.floor(e.value / 1000)
+            const key = this.datePicker.name
+            const params = { id: this.id }
+            params[key] = time
+            this.$ajax.put(`/admin-api/patient/${this.id}`, params).then(res => {
+                if (res.status == 0) {
+                    this.info[key] = e.value
+                    this.toggleBirthday()
+                }
+            })
+        },
+        opendDoctor() {
+            this.$refs['select-admin-user'].open()
+        },
+        closeDoctor() {
+            this.$refs['select-admin-user'].close()
+        },
+        selectDoctor(e) {
+            this.$ajax.put(`/admin-api/patient/${this.id}`, {id: this.id, doctor_id: e.id}).then(res => {
+                if (res.status == 0) {
+                    this.info.doctor_id = e.id
+                    this.info.doctor.name = e.name
+                }
+            })
+            this.closeDoctor()
+        },
+    }
 }
 </script>
 
-<style>
+<style scoped>
-
+    .u-cell-group {
-</style>
+        background: white;
+    }
+    .btn {
+        padding: 0 10px;
+        margin-top: 20px;
+    }
+</style>

src/pages/patient/form.vue

@@ -73,6 +73,7 @@ export default {
     components: {SelectAdminUser},
     data() {
         return {
+            id: '',
             form: {
                 name: '',
                 sex: gender.none.value,
@@ -110,6 +111,32 @@ export default {
             uni.setNavigationBarTitle({
                 title: '添加病人'
             })
+        } else {
+            this.id = e.id
+            uni.showLoading()
+            this.$ajax.get(`/admin-api/patient/${e.id}`, {_action: 'getData'}).then(res => {
+                if (res.status == 0) {
+                    this.form = {
+                        id: res.data.id,
+                        name: res.data.name,
+                        sex: res.data.sex,
+                        phone: res.data.phone,
+                        birthday: res.data.birthday,
+                        address: res.data.address,
+                        treat_at: res.data.treat_at,
+                        doctor_id: res.data.doctor_id,
+                        illness: res.data.illness
+                    }
+                    this.genderSelect = res.data.sex_text
+                    if (res.data.doctor) {
+                        this.doctor = {
+                            text: res.data.doctor.name,
+                            value: res.data.doctor.id,
+                        }
+                    }
+                    uni.setNavigationBarTitle({ title: this.form.name })
+                }
+            })
         }
     },
     onReady() {
@@ -151,20 +178,39 @@ export default {
         submit() {
             this.$refs['form'].validate().then(res => {
                 uni.showLoading()
-                this.$ajax.post('/admin-api/patient', this.form).then(res => {
+                if (this.id) {
-                    uni.hideLoading()
+                    this.update()
-                    if (res.status == 0) {
+                } else {
-                        uni.showToast({
+                    this.create()
-                            title: '提交成功',
+                }
-                            icon: 'success'
-                        })
-                        setTimeout(() => {
-                            uni.navigateBack()
-                        }, 1500);
-                    }
-                })
             }).catch(error => {})
         },
+        update() {
+            this.$ajax.put(`/admin-api/patient/${this.id}`, this.form).then(res => {
+                if (res.status == 0) {
+                    uni.showToast({
+                        title: '保存成功',
+                        icon: 'success'
+                    })
+                    setTimeout(() => {
+                        uni.navigateBack()
+                    }, 1500);
+                }
+            })
+        },
+        create() {
+            this.$ajax.post('/admin-api/patient', this.form).then(res => {
+                if (res.status == 0) {
+                    uni.showToast({
+                        title: '提交成功',
+                        icon: 'success'
+                    })
+                    setTimeout(() => {
+                        uni.navigateBack()
+                    }, 1500);
+                }
+            })
+        }
     }
 }
 </script>

src/pages/patient/index.vue

@@ -13,23 +13,25 @@
         <view class="add-button">
 			<u-button type="primary" icon="plus" shape="circle" size="large" @click="add" />
 		</view>
-        <view class="list">
+        <u-list class="list">
-            <u-list>
+            <u-list-item v-for="(item, index) in list" :key="item.id">
-                <u-swipe-action>
+                <u-cell
-                    <u-list-item v-for="item in list" :key="item.id">
+                    :title="item.name + (item.age != '' ? `(${item.age})` : '')"
-                        <u-swipe-action-item :options="options" :name="item.id" @click="swipeAction">
+                    :label="item.phone ? item.phone : '暂无联系方式'"
-                            <u-cell
+                    :clickable="true"
-                                :title="item.name + (item.age != '' ? `(${item.age})` : '')"
+                    :isLink="false"
-                                :label="item.phone ? item.phone : '暂无联系方式'"
+                    @click="openOption(index)"
-                                :url="`/pages/patient/detail?id=${item.id}`"
+                />
-                                :clickable="true"
+            </u-list-item>
-                                :isLink="false"
+        </u-list>
-                            />
+        <u-action-sheet
-                        </u-swipe-action-item>
+            :actions="option.list"
-                    </u-list-item>
+            :title="option.title"
-                </u-swipe-action>
+            :show="option.show"
-            </u-list>
+            :closeOnClickOverlay="true"
-        </view>
+            @close="closeOption"
+            @select="chooseOption"
+        />
     </view>
 </template>
 
@@ -42,10 +44,18 @@ export default {
             perPage: 20,
             total: 0,
             search: '',
-            options: [
+            option: {
-                {text: '修改', style: { backgroundColor: '#007aff' }},
+                id: '',
-                {text: '删除', style: { backgroundColor: '#dd524d' }}
+                show: false,
-            ],
+                list: [
+                    { name: "详细", color: '#4cd964', action: 'detail'},
+                    { name: "修改", color: "#007aff", action: 'edit' },
+                    { name: "添加病历", color: "#f0ad4e", action: 'record-add' },
+                    { name: "查看病历", color: "#4cd964", action: 'record' },
+                    { name: "删除", color: "#dd524d", action: 'delete' },
+                ],
+                title: '',
+            }
         }
     },
     onShow() {
@@ -87,8 +97,49 @@ export default {
                 url: '/pages/patient/form'
             })
         },
-        swipeAction(e) {
+        openOption(index) {
-            console.log(e)
+            const item = this.list[index]
+            this.option.title = item.name
+            this.option.id = item.id
+            this.option.show = true
+        },
+        closeOption() {
+            this.option.show = false
+        },
+        chooseOption(e) {
+            const id = this.option.id
+            if (e.action == 'detail') {
+                return uni.navigateTo({ url: `/pages/patient/detail?id=${id}` })
+            }
+            if (e.action == 'edit') {
+                return uni.navigateTo({ url: `/pages/patient/form?id=${id}` })
+            }
+            if (e.action == 'delete') {
+                uni.showModal({
+                    title: '删除 ' + this.option.title,
+                    content: '是否确定?',
+                    success: (result) => {
+                        if (result.confirm) {
+                            this.delete(id)
+                        }
+                    }
+                })
+               
+            }
+        },
+        delete(id) {
+            uni.showLoading()
+            this.$ajax.delete(`/admin-api/patient/${id}`).then(res => {
+                if (res.status == 0) {
+                    uni.showToast({
+                        title: '删除成功',
+                        icon: 'success'
+                    })
+                    setTimeout(() => {
+                        this.loadData(true)
+                    }, 1000)
+                }
+            })
         }
     }
 }

src/utils/ajax.js

@@ -12,6 +12,7 @@ instance.interceptors.request.use(
         if (token) {
             config.header['Authorization'] = `Bearer ${token}`
         }
+        config.header['Accept'] = 'application/json'
         return config
     },
     error => {
@@ -25,7 +26,7 @@ instance.interceptors.response.use(
     response => {
         uni.hideLoading()
         const res = response.data
-        if (res.status != 0 && res.doNotDisplayToast == 0) {
+        if (res.status != 0 && res.doNotDisplayToast != 1) {
             uni.showModal({
                 title: res.msg,
                 showCancel: false