You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
445 lines
11 KiB
445 lines
11 KiB
5 months ago
|
<!--
|
||
|
|
* @desc: 创建患者
|
||
|
|
* @Author: gaowenya
|
||
|
|
* @Date: 2023-06-20 14:27
|
||
|
|
* @LastEditors:
|
||
|
|
* @LastEditTime:
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<a-modal
|
||
|
|
class="patient-form"
|
||
|
|
:width="600"
|
||
|
|
:maskClosable="false"
|
||
|
|
:confirmLoading="confirmLoading"
|
||
|
|
:closable="false"
|
||
|
|
:destroyOnClose="true"
|
||
|
|
v-model="createVisible"
|
||
|
|
title="新建患者"
|
||
|
|
@ok="handleSubmit"
|
||
|
|
:footer="null"
|
||
|
|
>
|
||
|
|
<a-form-model
|
||
|
|
ref="form"
|
||
|
|
:model="form"
|
||
|
|
:label-col="{ span: 4 }"
|
||
|
|
:wrapper-col="{ span: 20 }"
|
||
|
|
labelAlign="left"
|
||
|
|
class="create-form"
|
||
|
|
:rules="rules"
|
||
|
|
>
|
||
|
|
<a-row :gutter="20">
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="姓名">
|
||
|
|
<a-input v-model="form.patientName" placeholder="请输入姓名" />
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="民族">
|
||
|
|
<a-select v-model="form.patientNation" placeholder="请选择民族">
|
||
|
|
<a-select-option
|
||
|
|
v-for="item in nationList"
|
||
|
|
:key="item"
|
||
|
|
:value="item"
|
||
|
|
>
|
||
|
|
{{ item }}
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="性别" >
|
||
|
|
<a-select v-model="form.patientGender" placeholder="请选择性别">
|
||
|
|
<a-select-option :value="0" >男</a-select-option>
|
||
|
|
<a-select-option :value="1" >女</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="身高">
|
||
|
|
<a-input v-model="form.height" placeholder="请输入身高 (cm)" />
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="体重">
|
||
|
|
<a-input v-model="form.weight" placeholder="请输入体重 (kg)" />
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="16">
|
||
|
|
<a-form-model-item label="身份证号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" placeholder="请输入身份证号">
|
||
|
|
<keyboard
|
||
|
|
placeHolder="请输入手机号"
|
||
|
|
:index-num="indexNum"
|
||
|
|
@keyboard-input="handleKeyBoard"
|
||
|
|
:old-value="patientIdCardNo"
|
||
|
|
/>
|
||
|
|
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="8" style="padding-top: 0.15vw;">
|
||
|
|
<a-button type="primary" class="idcard" @click="openCamera">扫描身份证</a-button>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="16">
|
||
|
|
<a-form-model-item label="联系方式" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" placeholder="请输入联系方式">
|
||
|
|
<a-input v-model="form.contract" placeholder="请输入联系方式" />
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24">
|
||
|
|
<a-divider />
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="急救类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
||
|
|
<a-select v-model="form.type" placeholder="请选择类型">
|
||
|
|
<a-select-option :value="0" >卒中急救</a-select-option>
|
||
|
|
<a-select-option :value="1" >胸痛</a-select-option>
|
||
|
|
<a-select-option :value="2" >创伤</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="12">
|
||
|
|
<a-form-model-item label="平车" >
|
||
|
|
<!-- <a-select v-model="form.carNo" placeholder="请选择平车号">
|
||
|
|
<a-select-option :value="0" >否</a-select-option>
|
||
|
|
<a-select-option :value="1" >是</a-select-option>
|
||
|
|
</a-select> -->
|
||
|
|
<a-select v-model="form.carNo" placeholder="请选择平车号">
|
||
|
|
<a-select-option
|
||
|
|
v-for="item in carList"
|
||
|
|
:key="item.id"
|
||
|
|
:value="item.deviceNo"
|
||
|
|
>
|
||
|
|
{{ item.deviceNo }}
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="16">
|
||
|
|
<a-form-model-item label="绿道状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||
|
|
<a-switch v-model="form.greenRoadFlag" />
|
||
|
|
</a-form-model-item>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24" class="footer-btns" >
|
||
|
|
<a-button class="footer-btn" type="primary" block @click="handleSubmit">新建</a-button>
|
||
|
|
</a-col>
|
||
|
|
<a-col :span="24" class="footer-btns" >
|
||
|
|
<a-button class="footer-btn cencelBtn" block @click="close">取消</a-button>
|
||
|
|
</a-col>
|
||
|
|
</a-row>
|
||
|
|
</a-form-model>
|
||
|
|
</a-modal>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import keyboard from '@/components/keyboard.vue';
|
||
|
|
import { create, uploadIdcard, idcardInfo, idcardInfoBase64 } from 'api';
|
||
|
|
import { mapState } from 'vuex';
|
||
|
|
export default {
|
||
|
|
name: 'create',
|
||
|
|
components: {
|
||
|
|
keyboard,
|
||
|
|
},
|
||
|
|
props: ['firstAidData', 'carList', 'carNo'],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
indexNum: 0, //必填字段，为键盘索引，每个键盘必须具有唯一值
|
||
|
|
patientIdCardNo: '',
|
||
|
|
keyboard: false,
|
||
|
|
createVisible: false,
|
||
|
|
inputFile: '',
|
||
|
|
file: '',
|
||
|
|
form: {},
|
||
|
|
rules: {},
|
||
|
|
confirmLoading: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState('storm', ['nationList', 'anyringToken']),
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleKeyBoard(value) {
|
||
|
|
//value为在输入框里面输入的值
|
||
|
|
this.patientIdCardNo = value;
|
||
|
|
},
|
||
|
|
open(data) {
|
||
|
|
console.log('open', data)
|
||
|
|
this.createVisible = true;
|
||
|
|
this.confirmLoading = false;
|
||
|
|
this.patientIdCardNo = '';
|
||
|
|
console.log(this.form)
|
||
|
|
this.form = data || {}
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
this.openCamera();
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.createVisible = false;
|
||
|
|
this.confirmLoading = false;
|
||
|
|
this.patientIdCardNo = '';
|
||
|
|
},
|
||
|
|
openCamera() {
|
||
|
|
const cmr = plus.camera.getCamera();
|
||
|
|
const res = cmr.supportedImageResolutions[0];
|
||
|
|
const fmt = cmr.supportedImageFormats[0];
|
||
|
|
cmr.captureImage(
|
||
|
|
(path) => {
|
||
|
|
plus.io.resolveLocalFileSystemURL(
|
||
|
|
path,
|
||
|
|
(entry) => {
|
||
|
|
//压缩图片
|
||
|
|
this.compressImage(entry.toLocalURL(), entry.name);
|
||
|
|
},
|
||
|
|
(e) => {
|
||
|
|
plus.nativeUI.toast(
|
||
|
|
'读取拍照文件错误：' + e.message
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
(error) => {
|
||
|
|
// alert("Capture image failed: " + error.message);
|
||
|
|
},
|
||
|
|
{
|
||
|
|
resolution: res,
|
||
|
|
format: fmt,
|
||
|
|
filter: 'image',
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
//压缩图片
|
||
|
|
compressImage(url, filename) {
|
||
|
|
var name = '_doc/upload/' + filename;
|
||
|
|
plus.zip.compressImage(
|
||
|
|
{
|
||
|
|
src: url, //src: (String 类型 )压缩转换原始图片的路径
|
||
|
|
dst: name, //压缩转换目标图片的路径
|
||
|
|
quality: 90, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100
|
||
|
|
overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
|
||
|
|
width: '250',
|
||
|
|
height: '320',
|
||
|
|
},
|
||
|
|
(zip) => {
|
||
|
|
//页面显示图片
|
||
|
|
this.showPics(zip.target, name);
|
||
|
|
},
|
||
|
|
(error) => {
|
||
|
|
plus.nativeUI.toast('压缩图片失败，请稍候再试');
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
//显示图片
|
||
|
|
showPics(url, name) {
|
||
|
|
let _this = this;
|
||
|
|
//根据路径读取到文件
|
||
|
|
plus.io.resolveLocalFileSystemURL(url, (entry) => {
|
||
|
|
entry.file((file) => {
|
||
|
|
var fileReader = new plus.io.FileReader();
|
||
|
|
fileReader.readAsDataURL(file);
|
||
|
|
fileReader.onloadend = (e) => {
|
||
|
|
var picUrl = e.target.result.toString();
|
||
|
|
this.idcardInfoBase64(picUrl);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
dataURLToFile(dataUrl, fileName) {
|
||
|
|
const dataArr = dataUrl.split(',');
|
||
|
|
const mime = dataArr[0].match(/:(.*);/)[1];
|
||
|
|
const originStr = atob(dataArr[1]);
|
||
|
|
return new File([originStr], fileName, {
|
||
|
|
type: mime,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async idcardInfoBase64(url) {
|
||
|
|
let res = await idcardInfoBase64(url);
|
||
|
|
const { data, code, msg } = res;
|
||
|
|
if (code === 200) {
|
||
|
|
const { name, sex, idCardNo, nation } = data;
|
||
|
|
this.form.patientName = name
|
||
|
|
this.form.patientGender = sex
|
||
|
|
this.form.patientNation = nation
|
||
|
|
this.patientIdCardNo = idCardNo;
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 上传前校检格式和大小
|
||
|
|
handleBeforeUpload(file) {
|
||
|
|
const isLt10M = file.size / 1024 / 1024 < 10000;
|
||
|
|
// 校检文件大小
|
||
|
|
if (!isLt10M) {
|
||
|
|
this.$message.error('上传头像图片大小不能超过 10MB!');
|
||
|
|
}
|
||
|
|
this.file = file;
|
||
|
|
return isLt10M;
|
||
|
|
},
|
||
|
|
// 上传成功回
|
||
|
|
async handleUploadAdd() {
|
||
|
|
if (!this.file) return '您还未选择文件';
|
||
|
|
// 使用FormData传参数和文件
|
||
|
|
var form = new FormData();
|
||
|
|
// 文件
|
||
|
|
form.append('file', this.file);
|
||
|
|
uploadIdcard(form).then((res) => {
|
||
|
|
if (res.code === 200) {
|
||
|
|
const { name, sex, idCardNo, nation } = res.data;
|
||
|
|
this.form.setFieldsValue({
|
||
|
|
['patientName']: name,
|
||
|
|
['patientGender']: sex,
|
||
|
|
['patientNation']: nation,
|
||
|
|
});
|
||
|
|
this.patientIdCardNo = idCardNo;
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onDelete() {
|
||
|
|
this.patientIdCardNo = '';
|
||
|
|
},
|
||
|
|
handleSubmit(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.$refs.form.validate(async (valid) => {
|
||
|
|
if (valid) {
|
||
|
|
const reg =
|
||
|
|
/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
|
||
|
|
|
||
|
|
if ( !reg.test(this.patientIdCardNo) && this.patientIdCardNo ) {
|
||
|
|
this.$message.error('身份证格式不正确');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (typeof this.firstAidData.greenRoadFlag == 'boolean') {
|
||
|
|
this.firstAidData.greenRoadFlag = 0;
|
||
|
|
}
|
||
|
|
let res = await create({
|
||
|
|
param: {
|
||
|
|
...this.form,
|
||
|
|
patientIdCardNo: this.patientIdCardNo,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const { data, code, msg } = res;
|
||
|
|
if (code === 200) {
|
||
|
|
this.confirmLoading = true;
|
||
|
|
this.createVisible = false;
|
||
|
|
this.$message.success('创建成功');
|
||
|
|
this.$emit('on-success', data);
|
||
|
|
} else {
|
||
|
|
this.confirmLoading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
.patient-form{
|
||
|
|
.create-form{
|
||
|
|
padding: 0 .6rem 1rem .6rem;
|
||
|
|
.ant-form-item{
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
.ant-form-item-label{}
|
||
|
|
.ant-input{
|
||
|
|
font-size: 1rem;
|
||
|
|
border: none;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-radius: .3rem;
|
||
|
|
.acitve {
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ant-select{
|
||
|
|
font-size: 1rem;
|
||
|
|
border:none;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-radius: 6px;
|
||
|
|
.ant-select-selection{
|
||
|
|
border:none;
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
font-size:13px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.footer-btns{
|
||
|
|
margin-top: 1.2rem;
|
||
|
|
padding: 0 1.5rem;
|
||
|
|
text-align:center;
|
||
|
|
.ant-btn.footer-btn{
|
||
|
|
width:80%;
|
||
|
|
border-radius: .8rem;
|
||
|
|
height: 3.64vw;
|
||
|
|
line-height: 3.64vw;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<style lang="less">
|
||
|
|
.patient-form{
|
||
|
|
.ant-modal-body{
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
.ant-modal-content{
|
||
|
|
border-radius: 1rem;
|
||
|
|
overflow: hidden;
|
||
|
|
.ant-modal-header{
|
||
|
|
border-bottom: none;
|
||
|
|
padding-top: 2rem;
|
||
|
|
.ant-modal-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Medium;
|
||
|
|
text-align: left;
|
||
|
|
color: #393d4e;
|
||
|
|
padding: 10px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-select{
|
||
|
|
.ant-select-selection,.inputText{
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
border:none;
|
||
|
|
.acitve {
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.ant-input:hover{
|
||
|
|
border: none
|
||
|
|
}
|
||
|
|
.ant-select-arrow{
|
||
|
|
position: absolute;
|
||
|
|
top: 36%;
|
||
|
|
svg{
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.input-container{
|
||
|
|
background-color: #F5F5F5;
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
.ant-switch{
|
||
|
|
height: 2.73vw;
|
||
|
|
width: 4.55vw;
|
||
|
|
color: #f5f5f5;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.ant-switch::after{
|
||
|
|
width: 2.3vw;
|
||
|
|
height: 2.3vw;
|
||
|
|
top: 1.5px;
|
||
|
|
}
|
||
|
|
.ant-switch-checked{
|
||
|
|
background-color:#34C759;
|
||
|
|
}
|
||
|
|
.cencelBtn{
|
||
|
|
background:#ddd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|