179 lines
6.6 KiB
Vue
179 lines
6.6 KiB
Vue
<template>
|
||
<view class="edit-address-page">
|
||
<navBar :title="pageTitle" />
|
||
|
||
<view class="form-container">
|
||
<!-- 医院（输入联想搜索） -->
|
||
<view class="form-item">
|
||
<view class="label">医院 <text class="required">*</text></view>
|
||
<view class="value full">
|
||
<input class="input" v-model.trim="form.hospital_name" placeholder="请输入医院名称" @input="onHospitalInput" @keydown.enter.prevent="onHospitalEnter" />
|
||
<view v-if="showHospitalList" class="suggestion">
|
||
<view v-for="h in hospitalList" :key="h.uuid" class="suggestion-item" @click="pickHospital(h)">
|
||
{{ h.name }}
|
||
</view>
|
||
<view v-if="hospitalList.length===0" class="suggestion-empty">无匹配医院</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分割线 -->
|
||
<view class="divider"></view>
|
||
|
||
<!-- 科室 -->
|
||
<view class="form-item">
|
||
<view class="label">科室 <text class="required">*</text></view>
|
||
<view class="value">
|
||
<input class="input" v-model.trim="form.office_name" placeholder="请输入科室" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider"></view>
|
||
|
||
<!-- 地址 -->
|
||
<view class="form-item">
|
||
<view class="label">地址 <text class="required">*</text></view>
|
||
<view class="value">
|
||
<input class="input" v-model.trim="form.location" placeholder="请输入地址" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider big"></view>
|
||
|
||
<!-- 门诊类型 -->
|
||
<view class="form-item column">
|
||
<view class="label">门诊类型 <text class="required">*</text></view>
|
||
<view class="type-row">
|
||
<view class="type-btn" :class="{active: form.type==1}" @click="selectType(1)">普通门诊</view>
|
||
<view class="type-btn" :class="{active: form.type==2}" @click="selectType(2)">专家门诊</view>
|
||
<view class="type-btn" :class="{active: form.type==3}" @click="selectType(3)">特需门诊</view>
|
||
<view class="type-btn" :class="{active: form.type==4}" @click="selectType(4)">专科/专病门诊</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-actions">
|
||
<view class="submit-btn" @click="submit">
|
||
<text class="btn-text">{{form.uuid?'确定修改':'确定新增'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
import api from '@/api/api.js'
|
||
|
||
const pageTitle = ref('新增执业地点')
|
||
const form = ref({
|
||
hospital_uuid: '',
|
||
hospital_name: '',
|
||
office_name: '',
|
||
location: '',
|
||
type: 4
|
||
})
|
||
|
||
const selectType = (t) => { form.value.type = t }
|
||
|
||
// 医院联想搜索
|
||
const hospitalList = ref([])
|
||
const showHospitalList = ref(false)
|
||
let hospitalTimer = null
|
||
const onHospitalInput = (e) => {
|
||
showHospitalList.value = true
|
||
if (hospitalTimer) clearTimeout(hospitalTimer)
|
||
hospitalTimer = setTimeout(() => {
|
||
fetchHospitals(e.detail.value || form.value.hospital_name)
|
||
}, 300)
|
||
}
|
||
const onHospitalEnter = () => {
|
||
fetchHospitals(form.value.hospital_name)
|
||
}
|
||
const fetchHospitals = async (keyword) => {
|
||
if (!keyword) { hospitalList.value = []; return }
|
||
const res = await api.getHospitalList({ name: keyword })
|
||
if (res && res.code === 200) {
|
||
hospitalList.value = res.data || []
|
||
}
|
||
}
|
||
const pickHospital = (h) => {
|
||
form.value.hospital_uuid = h.uuid
|
||
form.value.hospital_name = h.name
|
||
showHospitalList.value = false
|
||
}
|
||
const validate = () => {
|
||
if (!form.value.hospital_name) return '请选择医院'
|
||
if (!form.value.office_name) return '请输入科室'
|
||
if (!form.value.location) return '请输入地址'
|
||
if (!form.value.type) return '请选择门诊类型'
|
||
return ''
|
||
}
|
||
|
||
const submit = async () => {
|
||
const err = validate()
|
||
if (err) { uni.showToast({ title: err, icon: 'none' }); return }
|
||
// 示例更新接口；若不存在可替换为新增或本地处理
|
||
try {
|
||
const res =form.value.uuid?await api.updateWorkPlace(form.value) : await api.addWorkPlace(form.value)
|
||
if (res.code === 200) {
|
||
let title = form.value.uuid ? '修改成功' : '新增成功'
|
||
uni.showToast({ title: title, icon: 'none' })
|
||
uni.navigateBack()
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({ title: '提交失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onLoad((options) => {
|
||
// 支持从列表/详情传参回填
|
||
if (options) {
|
||
if(options.uuid){
|
||
form.value.uuid = options.uuid;
|
||
form.value.type = options.type;
|
||
form.value.hospital_uuid = options.hospital_uuid;
|
||
form.value.hospital_name = options.hospital_name;
|
||
form.value.office_name = options.office_name;
|
||
form.value.location = options.location;
|
||
}
|
||
if(options.uuid){
|
||
pageTitle.value = '修改执业地点'
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.edit-address-page { min-height: 100vh; background: #fff; }
|
||
.form-container { padding: 24rpx; }
|
||
|
||
.form-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 0; }
|
||
.form-item.column { flex-direction: column; align-items: flex-start; }
|
||
.label { font-size: 30rpx; color: #333; }
|
||
.required { color: #8B2316; margin-left: 6rpx; }
|
||
.value { flex: 1; margin-left: 24rpx; }
|
||
.value.full { width: 100%; margin-left: 0; position: relative; }
|
||
.value-text { font-size: 30rpx; color: #333; }
|
||
.value-text.placeholder { color: #999; }
|
||
.input { width: 100%; font-size: 30rpx; color: #333; }
|
||
|
||
.suggestion { position: absolute; top: 84rpx; left: 0; right: 0; background: #fff; border: 2rpx solid #eee; border-radius: 10rpx; max-height: 480rpx; overflow-y: auto; z-index: 10; }
|
||
.suggestion-item { padding: 20rpx 24rpx; font-size: 28rpx; color: #333; border-bottom: 2rpx solid #f5f5f5; }
|
||
.suggestion-item:last-child { border-bottom: 0; }
|
||
.suggestion-empty { padding: 20rpx 24rpx; font-size: 26rpx; color: #999; }
|
||
|
||
.divider { height: 2rpx; background: #eee; }
|
||
.divider.big { margin-top: 10rpx; }
|
||
|
||
.type-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rpx; margin-top: 20rpx; width: 100%; }
|
||
.type-btn { text-align: center; border: 2rpx solid #ddd; border-radius: 12rpx; height: 96rpx; line-height: 96rpx; color: #999; font-size: 24rpx;}
|
||
.type-btn.active { border-color: #8B2316; color: #8B2316; background: url('@/static/addoutpa_true.png') right bottom/39rpx 39rpx no-repeat; }
|
||
|
||
.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 30rpx; border-top: 1rpx solid #eee; }
|
||
.submit-btn { background: #8B2316; border-radius: 12rpx; padding: 24rpx 0; text-align: center; }
|
||
.btn-text { color: #fff; font-size: 32rpx; font-weight: 600; }
|
||
</style>
|
||
|