patient

pnpm-lock.yaml

@@ -126,7 +126,7 @@ devDependencies:
     version: 5.0.0(@vue/cli-service@5.0.1)(core-js@3.8.3)(vue@2.6.14)
   '@vue/cli-service':
     specifier: ~5.0.0
-    version: 5.0.1(sass-loader@10.4.1)(vue-template-compiler@2.6.14)(vue@2.6.14)
+    version: 5.0.1(sass-loader@10.0.0)(vue-template-compiler@2.6.14)(vue@2.6.14)
   babel-plugin-import:
     specifier: ^1.11.0
     version: 1.11.0
@@ -144,7 +144,7 @@ devDependencies:
     version: 1.66.1
   sass-loader:
     specifier: '10'
-    version: 10.4.1(sass@1.66.1)(webpack@4.46.0)
+    version: 10.0.0(sass@1.66.1)(webpack@4.46.0)
   vue-template-compiler:
     specifier: '>= 2.6.14 < 2.7'
     version: 2.6.14
@@ -2908,7 +2908,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.11
       '@vue/babel-preset-app': 5.0.8(@babel/core@7.22.11)(core-js@3.8.3)(vue@2.6.14)
-      '@vue/cli-service': 5.0.1(sass-loader@10.4.1)(vue-template-compiler@2.6.14)(vue@2.6.14)
+      '@vue/cli-service': 5.0.1(sass-loader@10.0.0)(vue-template-compiler@2.6.14)(vue@2.6.14)
       '@vue/cli-shared-utils': 5.0.8
       babel-loader: 8.3.0(@babel/core@7.22.11)(webpack@5.88.2)
       thread-loader: 3.0.4(webpack@5.88.2)
@@ -2929,7 +2929,7 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(sass-loader@10.4.1)(vue-template-compiler@2.6.14)(vue@2.6.14)
+      '@vue/cli-service': 5.0.1(sass-loader@10.0.0)(vue-template-compiler@2.6.14)(vue@2.6.14)
       '@vue/cli-shared-utils': 5.0.8
     transitivePeerDependencies:
       - encoding
@@ -2940,10 +2940,10 @@ packages:
     peerDependencies:
       '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
     dependencies:
-      '@vue/cli-service': 5.0.1(sass-loader@10.4.1)(vue-template-compiler@2.6.14)(vue@2.6.14)
+      '@vue/cli-service': 5.0.1(sass-loader@10.0.0)(vue-template-compiler@2.6.14)(vue@2.6.14)
     dev: true
 
-  /@vue/cli-service@5.0.1(sass-loader@10.4.1)(vue-template-compiler@2.6.14)(vue@2.6.14):
+  /@vue/cli-service@5.0.1(sass-loader@10.0.0)(vue-template-compiler@2.6.14)(vue@2.6.14):
     resolution: {integrity: sha512-lhTW1d8waZv1VaRSvhE5pWWfkdmAgRTRSluDfyxkehZHMAWi//rd7a9zppN3k9Zr4X3oYVii+u7wR/RcTlr9cQ==}
     engines: {node: ^12.0.0 || >= 14.0.0}
     hasBin: true
@@ -3017,7 +3017,7 @@ packages:
       postcss: 8.4.29
       postcss-loader: 6.2.1(postcss@8.4.29)(webpack@5.88.2)
       progress-webpack-plugin: 1.0.16(webpack@5.88.2)
-      sass-loader: 10.4.1(sass@1.66.1)(webpack@4.46.0)
+      sass-loader: 10.0.0(sass@1.66.1)(webpack@4.46.0)
       ssri: 8.0.1
       terser-webpack-plugin: 5.3.9(webpack@5.88.2)
       thread-loader: 3.0.4(webpack@5.88.2)
@@ -7796,6 +7796,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /klona@1.1.2:
+    resolution: {integrity: sha512-xf88rTeHiXk+XE2Vhi6yj8Wm3gMZrygGdKjJqN8HkV+PwF/t50/LdAKHoHpPcxFAlmQszTZ1CugrK25S7qDRLA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /klona@2.0.6:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
@@ -10118,12 +10123,12 @@ packages:
       - supports-color
     dev: true
 
-  /sass-loader@10.4.1(sass@1.66.1)(webpack@4.46.0):
+  /sass-loader@10.0.0(sass@1.66.1)(webpack@4.46.0):
-    resolution: {integrity: sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==}
+    resolution: {integrity: sha512-DEIrVJIXf2P6jtY3fpJu+uWetALCds2PwRA2iwbpzmHvtFmX5j0aX5Uz+YZSeJpjKrpgqWNKngcVxmwVfqxMow==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       fibers: '>= 3.1.0'
-      node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      node-sass: ^4.0.0
       sass: ^1.3.0
       webpack: ^4.36.0 || ^5.0.0
     peerDependenciesMeta:
@@ -10134,11 +10139,11 @@ packages:
       sass:
         optional: true
     dependencies:
-      klona: 2.0.6
+      klona: 1.1.2
       loader-utils: 2.0.4
       neo-async: 2.6.2
       sass: 1.66.1
-      schema-utils: 3.3.0
+      schema-utils: 2.7.1
       semver: 7.5.4
       webpack: 4.46.0
     dev: true

src/components/select-admin-user.vue

@@ -0,0 +1,54 @@
+<template>
+   <u-popup :show="show" mode="right" @close="close" @open="open">
+        <u-cell-group>
+            <u-cell
+                v-for="(item, index) in list"
+                :key="item.id"
+                :title="item.name"
+                :icon="item.avatar"
+                :name="index"
+                isLink
+                @click="click"
+            />
+        </u-cell-group>
+    </u-popup>
+</template>
+
+<script>
+export default {
+    name: "SelectAdminUser",
+    data () {
+        return {
+            show: false,
+            list: []
+        }
+    },
+    created() {
+        this.load()
+    },
+    methods: {
+        open() {
+            this.show = true
+        },
+        close() {
+            this.show = false
+        },
+        click(e) {
+            this.$emit('select', this.list[e.name])
+        },
+        load() {
+            this.$ajax.get('/admin-api/system/admin_users', {_action: 'getData'}).then(res => {
+                if (res.status == 0) {
+                    this.list = res.data.items
+                }
+            }).catch(error => {
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+    .u-cell-group {
+        margin-top: 20px;
+    }
+</style>

src/enums/gender.js

@@ -0,0 +1,16 @@
+const gender = {
+    none: { value: 0, text: '未知' },
+    male: { value: 1, text: '男' },
+    female: { value: 2, text: '女' },
+}
+
+gender.options = []
+gender.map = {}
+Object.keys(gender).forEach(key => {
+    if (gender[key] !== undefined && gender[key].value !== undefined) {
+        gender.options.push({ name: gender[key].text, value: gender[key].value })
+        gender.map[key] = gender[key].value
+    }
+})
+
+export default gender

src/main.js

@@ -3,12 +3,19 @@ import App from './App'
 import './uni.promisify.adaptor'
 import ajax from '@/utils/ajax'
 import uView from "uview-ui"
+import { formatDate } from './utils/index'
 
 Vue.config.productionTip = false
 
 Vue.prototype.$ajax = ajax
 
 Vue.use(uView);
+Vue.filter('date', function (value, format) {
+  if (!format) {
+    format = 'yyyy-MM-dd HH:mm:ss'
+  }
+  return formatDate(value, format)
+})
 
 App.mpType = 'app'
 

src/pages.json

@@ -24,6 +24,12 @@
 			"style": {
 				"navigationBarTitleText": "病人详细"
 			}
+		},
+		{
+			"path": "pages/patient/form",
+			"style": {
+				"navigationBarTitleText": "病人表单"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -2,7 +2,7 @@
 	<view class="page">
 		<u-grid align="center" :border="true" :col="2">
 			<u-grid-item v-for="item in list" :key="item.id" :name="item.id" @click="itemClick">
-				<u-image :src="`/static/${item.key}.png`" width="40" height="40" />
+				<u-image :src="`../../static/${item.key}.png`" width="40" height="40" />
 				<text class="grid-text">{{item.name}}</text>
 			</u-grid-item>
 		</u-grid>
@@ -13,8 +13,7 @@
 	export default {
 		data() {
 			return {
-				list: [
+				list: []
-				]
 			}
 		},
 		onReady() {
@@ -34,8 +33,10 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style scoped>
-	.page {
+	.u-grid {
-		margin-top: 200px
+		margin-top: 200px;
+		background: white;
+		padding: 10px 0;
 	}
 </style>

src/pages/patient/form.vue

@@ -0,0 +1,197 @@
+<template>
+    <view class="page">
+        <u--form :model="form" ref="form" labelWidth="70">
+            <u-form-item prop="name" label="姓名" :required="true">
+                <u--input v-model="form.name" border="bottom" placeholder="请输入姓名" />
+            </u-form-item>
+            <u-form-item prop="sex" label="性别" @click="toggleGender">
+                <view class="input-text">
+                    <text>{{ genderSelect }}</text>
+                    <u-icon name="arrow-right" />
+                </view>
+            </u-form-item>
+            <u-form-item prop="phone" label="联系方式">
+                <u--input v-model="form.phone" border="bottom" placeholder="请输入联系方式" />
+            </u-form-item>
+            <u-form-item prop="address" label="地址">
+                <u--input v-model="form.address" border="bottom" placeholder="请输入地址" />
+            </u-form-item>
+            <u-form-item prop="birthday" label="出生年月" @click="toggleBirthday('birthday')">
+                <view class="input-text">
+                    <text v-if="form.birthday">{{ form.birthday | date('yyy-MM-dd') }}</text>
+                    <text v-else class="input-placeholder">请选择出生日期</text>
+                    <u-icon name="arrow-right" />
+                </view>
+            </u-form-item>
+            <u-form-item prop="treat_at" label="初诊日期" @click="toggleBirthday('treat_at')">
+                <view class="input-text">
+                    <text v-if="form.treat_at">{{ form.treat_at | date('yyy-MM-dd') }}</text>
+                    <text v-else class="input-placeholder">请选择初诊日期</text>
+                    <u-icon name="arrow-right" />
+                </view>
+            </u-form-item>
+            <u-form-item prop="doctor_id" label="坐诊医生" @click="opendDoctor">
+                <view class="input-text">
+                <text v-if="form.doctor_id">{{ doctor.text }}</text>
+                <text v-else class="input-placeholder">请选择坐诊医生</text>
+                <u-icon name="arrow-right" />
+            </view>
+            </u-form-item>
+            <u-form-item prop="illness">
+                <u--textarea v-model="form.illness" :showConfirmBar="false" placeholder="请输入病情描述" />
+            </u-form-item>
+            <view class="button">
+                <u-button text="提交" type="primary" @click="submit"></u-button>
+            </view>
+        </u--form>
+        <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" />
+        <u-action-sheet
+            :show="genderShow"
+            :actions="gender.options"
+            :closeOnClickOverlay="true"
+            @close="toggleGender"
+            @select="selectGender"
+        />
+    </view>
+</template>
+
+<script>
+import gender from '../../enums/gender'
+import SelectAdminUser from '../../components/select-admin-user'
+
+export default {
+    components: {SelectAdminUser},
+    data() {
+        return {
+            form: {
+                name: '',
+                sex: gender.none.value,
+                phone: '',
+                birthday: '',
+                address: '',
+                treat_at: '',
+                doctor_id: '',
+                illness: ''
+            },
+            rules: {
+                name: {
+                    required: true,
+                    message: '姓名必填',
+				    trigger: ['blur', 'change']
+                }
+            },
+            gender: gender,
+            genderShow: false,
+            genderSelect: gender.none.text,
+            datePicker: {
+                show: false,
+                name: '',
+                value: (new Date).getTime(),
+                minDate: (new Date('1900-1-1')).getTime()
+            },
+            doctor: {
+                text: '',
+                value: '',
+            }
+        }
+    },
+    onLoad(e) {
+        if (!e.id) {
+            uni.setNavigationBarTitle({
+                title: '添加病人'
+            })
+        }
+    },
+    onReady() {
+        this.$refs['form'].setRules(this.rules)
+    },
+    methods: {
+        toggleGender() {
+            this.genderShow = !this.genderShow
+        },
+        toggleBirthday(name) {
+            if (name) {
+                this.datePicker.name = name
+                this.datePicker.value = this.form[name] ? Math.floor(this.form[name] * 1000) : (new Date).getTime()
+            }
+            this.datePicker.show = !this.datePicker.show
+        },
+        selectGender(e) {
+            this.genderSelect = e.name
+            this.form.sex = e.value
+        },
+        selectBirthday(e) {
+            this.form[this.datePicker.name] = Math.floor(e.value / 1000)
+            this.toggleBirthday()
+        },
+        opendDoctor() {
+            this.$refs['select-admin-user'].open()
+        },
+        closeDoctor() {
+            this.$refs['select-admin-user'].close()
+        },
+        selectDoctor(e) {
+            this.form.doctor_id = e.id
+            this.doctor = {
+                value: e.id,
+                text: e.name
+            }
+            this.closeDoctor()
+        },
+        submit() {
+            this.$refs['form'].validate().then(res => {
+                uni.showLoading()
+                this.$ajax.post('/admin-api/patient', this.form).then(res => {
+                    uni.hideLoading()
+                    if (res.status == 0) {
+                        uni.showToast({
+                            title: '提交成功',
+                            icon: 'success'
+                        })
+                        setTimeout(() => {
+                            uni.navigateBack()
+                        }, 1500);
+                    }
+                })
+            }).catch(error => {})
+        },
+    }
+}
+</script>
+
+<style scoped>
+    .page {
+        padding: 0 20px;
+        background: white;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .input-text {
+        color: #303133;
+        font-size: 15px;
+        padding: 6px 9px;
+        border-bottom: 1px solid #dadbde;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+    .input-placeholder {
+        color: #c0c0c0;
+    }
+    .button {
+        width: 100%;
+        margin-top: 20px;
+    }
+</style>

src/pages/patient/index.vue

@@ -1,28 +1,35 @@
 <template>
     <view class="page">
-        <u-sticky>
+        <u-search
-            <u-search
+            v-model="search"
-                v-model="search"
+            bgColor="white"
-                bgColor="white"
+            :showAction="false"
-                :showAction="false"
+            margin="10px 0"
-                margin="10px 0"
+            placeholder="姓名/联系方式"
-                placeholder="姓名/联系方式"
+            @search="loadData(true)"
-                @search="loadData(true)"
+            @clear="loadData(true)"
-                @clear="loadData(true)"
+            @change="changeSearch"
-                @change="changeSearch"
+        />
-            />
+        <view class="add-button">
-        </u-sticky>
+			<u-button type="primary" icon="plus" shape="circle" size="large" @click="add" />
-        <u-list>
+		</view>
-            <u-list-item v-for="item in list" :key="item.id">
+        <view class="list">
-                <u-cell
+            <u-list>
-                    :title="`${item.name}(${item.age})`"
+                <u-swipe-action>
-                    :label="item.phone"
+                    <u-list-item v-for="item in list" :key="item.id">
-                    :url="`/pages/patient/detail?id=${item.id}`"
+                        <u-swipe-action-item :options="options" :name="item.id" @click="swipeAction">
-                    :clickable="true"
+                            <u-cell
-                    :isLink="true"
+                                :title="item.name + (item.age != '' ? `(${item.age})` : '')"
-                />
+                                :label="item.phone ? item.phone : '暂无联系方式'"
-            </u-list-item>
+                                :url="`/pages/patient/detail?id=${item.id}`"
-        </u-list>
+                                :clickable="true"
+                                :isLink="false"
+                            />
+                        </u-swipe-action-item>
+                    </u-list-item>
+                </u-swipe-action>
+            </u-list>
+        </view>
     </view>
 </template>
 
@@ -32,12 +39,16 @@ export default {
         return {
             list: [],
             page: 1,
-            perPage: 10,
+            perPage: 20,
             total: 0,
-            search: ''
+            search: '',
+            options: [
+                {text: '修改', style: { backgroundColor: '#007aff' }},
+                {text: '删除', style: { backgroundColor: '#dd524d' }}
+            ],
         }
     },
-    onReady() {
+    onShow() {
         this.loadData(true)
     },
     onPullDownRefresh() {
@@ -70,12 +81,27 @@ export default {
             if (!value) {
                 this.loadData(true)
             }
+        },
+        add() {
+            uni.navigateTo({
+                url: '/pages/patient/form'
+            })
+        },
+        swipeAction(e) {
+            console.log(e)
         }
     }
 }
 </script>
-<style scoped lang="scss">
+<style scoped>
-    .u-list {
+    .list {
         background-color: white;
+        padding-bottom: 20px;
+    }
+    .add-button {
+        position: absolute;
+        bottom: 100px;
+        right: 50px;
+        z-index: 999;
     }
 </style>

src/utils/ajax.js

@@ -27,7 +27,8 @@ instance.interceptors.response.use(
         const res = response.data
         if (res.status != 0 && res.doNotDisplayToast == 0) {
             uni.showModal({
-                title: res.message
+                title: res.msg,
+                showCancel: false
             })
         }
         if (res.code == 401) {

src/utils/index.js

@@ -0,0 +1,40 @@
+export function formatDate(dateTime = null, formatStr = 'yyyy-MM-dd HH:mm:ss') {
+
+    if (!dateTime) return ''
+    let date
+    // 若传入时间为假值，则取当前时间
+    if (!dateTime) {
+      date = new Date()
+    } else if (/^\d{10}$/.test(dateTime.toString().trim())) {
+      date = new Date(dateTime * 1000)
+    } else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
+      date = new Date(Number(dateTime))
+    } else {
+      date = new Date(
+        typeof dateTime === 'string' ?
+          dateTime.replace(/-/g, '/') :
+          dateTime
+      )
+    }
+  
+    const timeSource = {
+      'y': date.getFullYear().toString(), // 年
+      'M': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
+      'd': date.getDate().toString().padStart(2, '0'), // 日
+      'H': date.getHours().toString().padStart(2, '0'), // 时
+      'm': date.getMinutes().toString().padStart(2, '0'), // 分
+      's': date.getSeconds().toString().padStart(2, '0') // 秒
+  
+    }
+  
+    for (const key in timeSource) {
+      const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
+      if (ret) {
+        const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
+        formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
+      }
+    }
+    return formatStr
+  }
+
+export default {formatDate}