252 lines
8.3 KiB
Vue
252 lines
8.3 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 hospital-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="如门诊楼东侧502室" />
|
||
</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="alertDialog">
|
||
<text class="btn-text">{{form.uuid?'确定修改':'确定新增'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<unidialog
|
||
:visible="noticeVisible"
|
||
:title="'执业地点'"
|
||
:cancelText="'返回修改'"
|
||
:confirmText="'确认发布'"
|
||
@close="noticeVisible=false"
|
||
@confirm="noticeConfirm"
|
||
>
|
||
<template v-slot:content>
|
||
<view class="ppt-content">
|
||
<view class="notice-row">
|
||
<view class="name">医院：</view>
|
||
<view class="value">{{ form.hospital_name }}</view>
|
||
|
||
</view>
|
||
<view class="notice-row">
|
||
<view class="name">科室：</view>
|
||
<view class="value">
|
||
{{ form.office_name }}
|
||
</view>
|
||
</view>
|
||
<view class="notice-row">
|
||
<view class="name">地址：</view>
|
||
<view class="value">
|
||
{{ form.location }}
|
||
</view>
|
||
</view>
|
||
<view class="notice-row">
|
||
<view class="name">门诊类型：</view>
|
||
<view class="value" v-if="form.type==1">
|
||
普通门诊
|
||
</view>
|
||
<view class="value" v-if="form.type==2">
|
||
专家门诊
|
||
</view>
|
||
<view class="value" v-if="form.type==3">
|
||
特需门诊
|
||
</view>
|
||
<view class="value" v-if="form.type==4">
|
||
专科/专病门诊
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
</unidialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
import unidialog from '@/components/dialog/dialog.vue'
|
||
import api from '@/api/api.js'
|
||
const noticeVisible = ref(false)
|
||
const noticeConfirm = () => {
|
||
noticeVisible.value = false
|
||
submit()
|
||
}
|
||
|
||
const pageTitle = ref('新增执业地点')
|
||
const form = ref({
|
||
hospital_uuid: '',
|
||
hospital_name: '',
|
||
office_name: '',
|
||
location: '',
|
||
type: 1
|
||
})
|
||
|
||
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 alertDialog = () => {
|
||
const err = validate()
|
||
if (err) { uni.showToast({ title: err, icon: 'none' }); return }
|
||
noticeVisible.value = true
|
||
}
|
||
const submit = async () => {
|
||
|
||
// 示例更新接口；若不存在可替换为新增或本地处理
|
||
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>
|
||
.notice-row{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
.name{
|
||
width: 160rpx;
|
||
text-align: right;
|
||
}
|
||
.value{
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
}
|
||
.edit-address-page { min-height: 100vh; background: #fff; }
|
||
.form-container { padding: 24rpx;margin-top: calc(var(--status-bar-height) + 44px); }
|
||
|
||
.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; }
|
||
.hospital-input{
|
||
padding-left:24rpx;
|
||
}
|
||
.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>
|
||
|