255 lines
8.7 KiB
Vue
255 lines
8.7 KiB
Vue
<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 label="病情描述" prop="illness" @click="openEditor">
|
|
<view class="input-text">
|
|
<rich-text v-if="form.illness" :nodes="form.illness" />
|
|
<text v-else class="input-placeholder">点击填写病情描述</text>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</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"
|
|
/>
|
|
<cu-editor ref="editor" placeholder="请输入病情描述" @confirm="confirmEditor" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import gender from '../../enums/gender'
|
|
import SelectAdminUser from '../../components/select-admin-user'
|
|
import CuEditor from '../../components/cu-editor'
|
|
|
|
export default {
|
|
components: {SelectAdminUser, CuEditor},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
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: '添加病人'
|
|
})
|
|
} 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() {
|
|
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()
|
|
},
|
|
openEditor() {
|
|
this.$refs['editor'].open(this.form.illness)
|
|
},
|
|
confirmEditor(e) {
|
|
this.form.illness = e.html
|
|
},
|
|
submit() {
|
|
this.$refs['form'].validate().then(res => {
|
|
uni.showLoading()
|
|
if (this.id) {
|
|
this.update()
|
|
} else {
|
|
this.create()
|
|
}
|
|
}).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>
|
|
|
|
<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> |