web/src/components/registration/Edit.vue

475 lines
15 KiB
Vue

<template>
<Mask :is-show="isShow" width="800" :height="height" title="挂号" @close="close"
:show-footer="true">
<template #default>
<div style="padding:0 24px">
<el-form
v-loading="loading"
:model="edit_data"
label-width="auto"
:rules="rules"
ref="form"
>
<el-descriptions
border
direction="vertical"
label-width="100"
:column="4"
style="margin-top: 20px"
>
<el-descriptions-item label="姓名">
<el-form-item prop="name" style="margin-bottom: 2px">
<el-input v-model="edit_data.name" placeholder="请输入姓名" clearable
:disabled="edit_data.status==1||edit_data.status==3||edit_data.status==0"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="性别">
<el-form-item prop="gender">
<el-radio-group v-model="edit_data.gender"
:disabled="edit_data.status==1||edit_data.status==3||edit_data.status==0">
<el-radio :value="1">男</el-radio>
<el-radio :value="2">女</el-radio>
</el-radio-group>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="年龄">
<el-form-item prop="age">
<el-input v-model.number="edit_data.age" placeholder="请输入年龄"
:disabled="edit_data.status==1||edit_data.status==3||edit_data.status==0"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="手机号">
<el-form-item prop="phone">
<el-input v-model="edit_data.phone" placeholder="手机号"
:disabled="edit_data.status==3||edit_data.status==0"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="医生">
<el-form-item prop="organizationDoctorId">
<el-select
v-model="edit_data.organizationDoctorId"
placeholder="请选择医生"
@change="getSectionList"
:disabled="edit_data.status==3||edit_data.status==0"
>
<el-option
v-for="item in doctorList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="科室">
<el-form-item>
<el-select
v-model="edit_data.organizationSectionId"
placeholder="选择科室"
:disabled="edit_data.status==3||edit_data.status==0"
>
<el-option
v-for="item in sectionList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="证件类型">
<el-form-item prop="certType">
<el-select v-model="edit_data.certType" placeholder="证件类型"
:disabled="edit_data.status==1||edit_data.status==3||edit_data.status==0">
<el-option
v-for="item in certTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="证件码">
<el-form-item prop="certNo">
<el-input v-model="edit_data.certNo" placeholder="请输入证件码"
:disabled="edit_data.status==1||edit_data.status==3||edit_data.status==0"></el-input>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="初/复诊">
<el-form-item prop="visitType">
<el-select v-model="edit_data.visitType" placeholder="就诊类型" :disabled="edit_data.status==0">
<el-option label="初诊" :value="0"></el-option>
<el-option label="复诊" :value="1"></el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item label="费用类型">
<el-form-item prop="type">
<el-select v-model="edit_data.type">
<el-option label="普通" :value="1"></el-option>
<el-option label="医保" :value="2"></el-option>
</el-select>
</el-form-item>
</el-descriptions-item>
<el-descriptions-item
label="备注">
<el-form-item>
<el-input v-model="edit_data.memo" placeholder="备注" :disabled="edit_data.status==0"></el-input>
</el-form-item>
</el-descriptions-item>
</el-descriptions>
</el-form>
<h5 v-if="!isShowCard" style="margin:24px 0;font-size: 16px">险种列表</h5>
<el-table
:data="tableData"
style="width: 100%;"
v-if="!isShowCard"
height="160"
>
<el-table-column label="险种类型" prop="insutype">
<template #default="scope">
{{ getKey(insutypes, scope.row.insutype) }}
</template>
</el-table-column>
<el-table-column label="待遇状态">
</el-table-column>
<el-table-column label="参保日期" prop="psn_insu_date"></el-table-column>
<el-table-column label="剩余余额" prop="balc">
<template #default="scope">
¥{{ scope.row.balc || 0 }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<template #footer>
<div class="bottom">
<el-dropdown v-if="isShowCard" placement="top-start" @show="showCardBtn" @hide="hide"
:disabled="edit_data.status==0">
<div class="left" style="outline: none;">
<span class="btnCard" type="primary">
<img class="image" src="/static/images/registration/card.png" alt=""
srcset="">{{ edit_data.status == 0 ? '不能读卡' : '进行读卡' }}
<img class="image1" :src="'/static/images/registration/'+(showBtn?2:1)+'.png'" alt="" srcset="">
</span>
</div>
<template #dropdown>
<CardDefault ref="cardDefaultRef" v-model="socialCard" @socialCardUpdate="socialCardUpdate"
@close="deleteCard" @changeLoading="changeLoading"/>
</template>
</el-dropdown>
<div class="closeBtn" v-else @click="deleteCard" style="outline: none;">
<img class="image" src="/static/images/registration/card.png" alt="" srcset="">
退出医保
</div>
<div class="bottom-right">
<el-button type="primary" @click="save" :disabled="edit_data.status==0">保存</el-button>
<el-button @click="close">取消</el-button>
<el-button v-if="edit_data.status==1" type="danger" @click="registrationCancel">退号</el-button>
</div>
</div>
</template>
</Mask>
</template>
<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from 'vue'
import {post} from '@/utils/request.ts'
import CardDefault from '@/components/registration/CardDefault.vue'
import {ElMessage, ElMessageBox} from "element-plus";
import Mask from "@/components/common/Mask.vue";
import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"
import {getKey} from "@/utils/discrotyUtil.ts";
import insutypes from "@/assets/config/directory/insutypes.json"
import depts from "@/assets/config/directory/depts.json";
import {apiConfig} from "@/assets/config/apiConfig.ts";
const height = ref(470)
const certTypeList = ref<any>(
Object.entries(psnCertTypes)
.map(([id, name]) => ({id: Number(id), name}))
.sort((a, b) => a.id - b.id)
)
const edit_data = ref<any>({})
const rules = ref<any>({
name: [
{required: true, message: '请输入名称', trigger: 'blur'},
],
age: [
{required: true, message: '请输入年龄', trigger: 'blur'},
{type: 'number', message: '年龄必须为数字值', trigger: 'blur'},
],
gender: [
{required: true, message: '请选择性别', trigger: 'blur'},
],
spec: [
{required: true, message: '请输入规格', trigger: 'blur'},
],
phone: [
{required: true, message: '请输入手机号', trigger: 'blur'},
],
organzationDoctorId: [
{required: true, message: '请选择医生', trigger: 'blur'},
],
certType: [
{required: true, message: '请选择证件类型', trigger: 'blur'},
],
certNo: [
{required: true, message: '请输入证件码', trigger: 'blur'},
],
visitType: [
{required: true, message: '请选择就诊类型', trigger: 'blur'},
]
})
const isShow = ref(false)
const emit = defineEmits(['close'])
const close = () => {
isShow.value = false
edit_data.value = {}
isShowCard.value = true
nextTick(() => {
cardDefaultRef.value?.close()
height.value = 470
})
emit('close')
}
const form = ref()
const save = () => {
let data = {
...edit_data.value,
psnNo: socialCard.value?.data?.baseinfo.psn_no,
insutype: socialCard.value?.data?.insuinfo[0].insutype,
insuBalance: socialCard.value?.data?.insuinfo[0].balc,
}
form.value.validate((v: any) => {
if (v) {
if (edit_data.value.id) {
post('registration/edit', {
data: data, mdtrtCertNo: socialCard.value?.mdtrtCertNo,
mdtrtCertType: socialCard.value?.mdtrtCertType
}).then(() => {
ElMessage.success('修改成功')
close()
})
} else {
console.log(socialCard.value)
post('registration/add', {
data: data,
mdtrtCertNo: socialCard.value?.mdtrtCertNo,
mdtrtCertType: socialCard.value?.mdtrtCertType
}).then(() => {
ElMessage.success('挂号成功')
close()
})
}
}
})
}
//退出挂号
const registrationCancel = () => {
post(apiConfig.RegistrationChangeStatus, {id: edit_data.value.id, status: 0}).then(() => {
ElMessage.success('退号成功')
close()
})
}
const doctorList = ref<any>([])
const getDoctorList = () => {
let query = {
role: 1
}
post('organization/member/search', {query: query}).then((res: any) => {
doctorList.value = res
})
}
const socialCard: any = ref({
data: null,
payInfo: {},
lastUse: null
})
const init = (doctorId: any, id: any) => {
isShow.value = true
edit_data.value.organizationDoctorId = doctorId
if (id) {
post('registration/getById', {id: id}).then((res: any) => {
edit_data.value = res
edit_data.value.certType = Number(edit_data.value.certType)
})
}
getSectionList()
getDoctorList()
}
const isShowCard = ref<any>(true)
const tableData = ref<any>([])
const socialCardUpdate = (e: any) => {
isShowCard.value = false
if (e) {
isShowCard.value = false
edit_data.value.gender = Number(e.data.baseinfo.gend)
edit_data.value.name = e.data.baseinfo.psn_name
edit_data.value.certType = Number(e.data.baseinfo.psn_cert_type)
edit_data.value.certNo = e.data.baseinfo.certno
edit_data.value.age = Math.floor(e.data.baseinfo.age)
tableData.value = e.data.insuinfo
if (edit_data.value.certNo) {
post('vip/vip/list', {
keyword: edit_data.value.certNo,
page: 1,
pageSize: 50
}).then((res: any) => {
edit_data.value.name = res.list[0].name
edit_data.value.gender = res.list[0].sex
edit_data.value.phone = res.list[0].phone
edit_data.value.certType = Number(res.list[0].certType)
edit_data.value.certNo = res.list[0].certNo
edit_data.value.memo = res.list[0].remark
edit_data.value.visitType = 1
})
}
}
nextTick(() => {
if (tableData.value.length > 0) {
height.value = 700
} else {
height.value = 470
}
})
loading.value = false
}
const cardDefaultRef = ref<any>("")
const deleteCard = () => {
ElMessageBox.confirm("退出识别", "提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
callback: (action: any) => {
if (action == "confirm") {
isShowCard.value = true
edit_data.value = {}
tableData.value = []
nextTick(() => {
cardDefaultRef.value?.close()
height.value = 470
})
}
},
});
}
const showBtn = ref(false)
const showCardBtn = () => {
showBtn.value = true
}
const hide = () => {
showBtn.value = false
}
const sectionList = ref<any>([])
const getSectionList = () => {
if(!edit_data.value.organizationDoctorId)return
post(apiConfig.OrganizationSectionListByMemberId, {memberId: edit_data.value.organizationDoctorId}).then((res: any) => {
sectionList.value = res
if (res.length > 0) {
edit_data.value.organizationSectionId = res[0].id
}
})
}
const loading = ref(false)
const changeLoading = (e: any) => {
loading.value = e
}
defineExpose({init})
</script>
<style scoped lang="scss">
.title {
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
}
.bottom {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.btnCard {
width: 150px;
height: 36px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #4D6DE4;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 15px;
color: #4D6DE4;
font-style: normal;
.image {
width: 20px;
height: 17px;
margin-right: 6px;
}
.image1 {
width: 12px;
height: 6px;
margin-left: 16px;
}
&:hover {
cursor: pointer;
border: 1px solid #4D6DE4;
}
}
.closeBtn {
width: 150px;
height: 36px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #4D6DE4;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 15px;
color: #4D6DE4;
font-style: normal;
.image {
width: 20px;
height: 17px;
margin-right: 6px;
}
&:hover {
cursor: pointer;
border: 1px solid #4D6DE4;
}
}
:deep(.el-dropdown) {
&:hover {
border: none;
}
}
:deep(.el-form-item) {
margin-bottom: 2px !important;
}
</style>