<template> <div> <a-spin tip="加载中..." :spinning="spinning"> <a-card> <div style="font-size: 18px;font-weight: 600"> <span>叶酸发放登记</span> </div> <a-form-model ref="formRef" :model="formData" :rules="formRules" :labelCol="{span: 6}" :wrapperCol="{span: 16}"> <div style="margin: 30px 0px"> <div class="divider_my"><span class="midText">居民信息</span></div> </div> <div style="clear: both"></div> <a-card size="small" :headStyle="{background: '#FAFAFA'}"> <div slot="title"> <img class="title_img" src="../../../../../static/images/user_info_index.png"> <span class="title_font">女方信息</span> </div> <a-button slot="extra" class="ant-table-btn" @click="getWomenIdCardInfo">身份证识别</a-button> <a-row :gutter="16"> <a-col :span="12"> <a-form-model-item label="姓名" prop="womanName"> <a-input v-toInputNum="{num: 15}" @keyup.enter.native="nextFocus(1)" ref="input1" placeholder="请输入姓名,最多可输入15个字" :disabled="disabled" v-model="formData.womanName"></a-input> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="证件类型" prop="womenCertificateType"> <a-select v-model="formData.womenCertificateType" placeholder="请选择" @keyup.enter.native="nextFocus(2)" ref="input2" :disabled="disabled" @change="changeWomenCardType"> <a-select-option v-for="item in certificateTypeList" :key="item.enumValue" :value="item.enumValue" > {{ item.enumName }} </a-select-option> </a-select> </a-form-model-item> </a-col> <a-col :span="12" v-if="formData.womenCertificateType!=3"> <a-form-model-item label="证件号码" prop="womenIdCard"> <a-input placeholder="请输入证件号码" @blur="womenIdCardChange" style="width: 100%" @keyup.enter.native="nextFocus(3)" ref="input3" v-model="formData.womenIdCard" :disabled="disabled"></a-input> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="出生日期" prop="birthDate"> <a-date-picker style="width: 100%" placeholder="请输入出生日期" format="YYYY-MM-DD" ref="input4" @change="nextFocus(4)" value-format="yyyy-MM-DD" :disabled="disabled" v-model="formData.birthDate"/> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="身高" prop="height"> <a-input type="number" placeholder="请输入身高,1000以内的数值" @keyup.enter.native="nextFocus(5)" ref="input5" @blur="onBlur(1,formData.height)" :disabled="disabled" v-model="formData.height" suffix="cm" ></a-input> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="体重" prop="weight"> <a-input type="number" placeholder="请输入体重,1000以内的数值" @keyup.enter.native="nextFocus(6)" ref="input6" @blur="onBlur(2,formData.weight)" :disabled="disabled" v-model="formData.weight" suffix="kg" ></a-input> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="BMI" prop="bmi"> <a-input v-model="formData.bmi" disabled> </a-input> </a-form-model-item> </a-col> </a-row> </a-card> <a-card size="small" :headStyle="{background: '#FAFAFA'}" style="margin-top: 16px"> <div slot="title"> <img class="title_img" src="../../../../../static/images/user_info_index.png"> <span class="title_font">问卷<p style="font-size: 14px;display:inline;color: red;margin-left: 10px">请提示用户:如新鲜蔬果摄入少、血液叶酸水平低、备孕时间短,请酌情增补每日叶酸服用量。</p></span> </div> <a-row :gutter="16" style="margin-left: 150px"> <a-col :span="12"> <span style="font-weight: bold">符合以下情况的,请在□里打√:</span> <a-form-model-item label="" prop="checkedList"> <a-checkbox-group style="width: 100%" v-model="checkedList" :options="plainOptions" @change="onChange"/> </a-form-model-item> </a-col> <a-col :span="12"> <p style="font-size: 20px;margin-top: 15%">建议服用:{{ formData.recommendEat }}</p> </a-col> </a-row> </a-card> <a-card size="small" :headStyle="{background: '#FAFAFA'}" style="margin-top: 16px"> <div slot="title"> <img class="title_img" src="../../../../../static/images/user_info_index.png"> <span class="title_font">其他信息</span> </div> <a-row :gutter="16"> <a-col :span="24"> <a-form-model-item label="联系电话" prop="telephone" :labelCol="{span: 3}" :wrapperCol="{span: 8}"> <a-input placeholder="请输入联系电话" v-model="formData.telephone" @keyup.enter.native="nextFocus(7)" ref="input7" :disabled="disabled"></a-input> </a-form-model-item> </a-col> <a-col :span="24"> <a-form-model-item label="现住地址" prop="presentCode" :labelCol="{span: 3}" :wrapperCol="{span: 20}"> <all-area-cascader :disabled="disabled" @keyup.enter.native="nextFocus(8)" ref="input8" v-model="formData.presentCode"></all-area-cascader> </a-form-model-item> </a-col> </a-row> <a-row :gutter="16"> <a-col :span="24"> <a-form-model-item label="详细地址" prop="nowAddress" :labelCol="{span: 3}" :wrapperCol="{span: 20}"> <a-input @keyup.enter.native="nextFocus(9)" ref="input9" v-toInputNum="{num: 100}" placeholder="请输入详细地址,最多可输入100个字" v-model="formData.nowAddress" :disabled="disabled"></a-input> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="签署方式" prop="signedMode"> <a-select v-model="formData.signedMode" placeholder="请选择" disabled> <a-select-option v-for="item in signedModeList" :key="item.enumValue" :value="item.enumValue" > {{ item.enumName }} </a-select-option> </a-select> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="签署日期" prop="parentDate"> <a-date-picker v-model="formData.parentDate" format="yyyy-MM-DD" @change="nextFocus(10)" ref="input10" value-format="yyyy-MM-DD" :disabled="disabled" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="12" :offset="3" v-if="this.routerParams.routerFlag == 'applyGrant'"> <a-form-model-item :wrapperCol="{span: 16}"> <div style="border: 1px dashed #EEEEEE;text-align: center"> <div class="sign">签字</div> <img style="height: 100px;margin-top: 20px;width: auto;transform: rotate(-90deg);" :src="formData.applySignUrl"> </div> </a-form-model-item> </a-col> </a-row> </a-card> <div style="margin: 30px 0px"> <div class="divider_my"><span class="midText">发放信息</span></div> </div> <div style="clear: both"></div> <a-row> <a-col :span="12"> <a-form-model-item label="发放日期" prop="provideDate"> <a-date-picker v-model="formData.provideDate" value-format="yyyy-MM-DD" @change="nextFocus(11)" ref="input11" format="YYYY-MM-DD" style="width: 100%"/> </a-form-model-item> </a-col> <a-col :span="12"> <a-form-model-item label="发放数量" prop="provideNumber"> <a-input type="number" placeholder="请输入发放数量" @keyup.enter.native="nextFocus(12)" ref="input12" v-model="formData.provideNumber" suffix="瓶" ></a-input> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="12"> <a-form-model-item label="发放医生" prop="provideDoctorId"> <a-select v-model="formData.provideDoctorId" placeholder="请选择" @keyup.enter.native="nextFocus(13)" ref="input13"> <a-select-option v-for="item in doctorInfoList" :key="item.id" :value="item.id" > {{ item.staffName }} </a-select-option> </a-select> </a-form-model-item> </a-col> </a-row> <a-col :span="24"> <a-form-model-item label="备注" prop="remarks" :labelCol="{span: 3}" :wrapperCol="{span: 20}"> <a-textarea placeholder="请输入备注,最多可输入500字" v-model="formData.remarks" :rows="5" @keyup.enter.native="nextFocus(14)" ref="input14" :maxLength="500"></a-textarea> </a-form-model-item> </a-col> </a-form-model> <!-- 选择叶酸种类弹框--> <div> <in-stock-manage-info ref="inStockManageInfo" @selectedIdList="getChecked" v-if="readyGetChecked" :menuId="routerParams.menuId"></in-stock-manage-info> </div> <div style="text-align: center;margin-top: 16px"> <a-button class="ant-table-btn" @click="goBack">取消</a-button> <a-button type="primary" :loading="spinning" @click="addMaterialDis" style="margin-left: 8px"> 确认 </a-button> </div> </a-card> </a-spin> </div> </template> <script> import {checkPhone, closedDetail, getEnumByFlag, GetUserInfoByCardDevice} from "../../../utils/common"; import {cardType} from "../../../utils/dropDownCollection"; import moment from 'moment' import InStockManageInfo from "./inStockManageInfo"; import allAreaCascader from "../../../components/allAreaCascader"; let vm = this export default { components: {InStockManageInfo, allAreaCascader}, data() { let unitInfo = JSON.parse(window.sessionStorage.getItem('unitInfo')); let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')); let date = moment(new Date()).format('YYYY-MM-DD'); return { modelType: "", userInfo: userInfo, unitInfo: unitInfo, indeterminate: true, checkedList: [], plainOptions: [], checkAll: false, spinning: false, // 弹窗内表单 formData: { weight: null, height: null, bmi: "", womanName: undefined, womenCertificateType: '1', womenIdCard: undefined, oncePregnant: '', pregnantNum: undefined, manName: undefined, menIdCard: undefined, telephone: undefined, presentCode: undefined, nowAddress: "", signedMode: '2', parentDate: date, provideDate: date, provideDoctorId: userInfo.relationId, provideNumber: "", provideRecordList: [], remarks: undefined, birthDate: "", recommendEat: "1颗/天(0.4mg/天)", question: "" }, cardType, disabled: false, formRules: { womanName: [ {required: true, message: '请输入姓名'} ], womenCertificateType: [ {required: true, message: '请选择证件类型'} ], womenIdCard: [ {required: true, message: '请输入证件号码'}, { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号' } ], provideNumber: [ {required: true, message: '请输入发放数量'}, {validator: this.checkProvideNumber, trigger: 'blur'}, ], birthDate: [ {required: true, message: '请输入出生日期'} ], height: [ {required: true, message: '请输入身高,1000以内的数值'}, {validator: this.checkHeightWeight}, ], weight: [ {required: true, message: '请输入体重,1000以内的数值'}, {validator: this.checkHeightWeight}, ], manName: [ {required: true, message: '请输入姓名'} ], menCertificateType: [ {required: true, message: '请选择证件类型'} ], menIdCard: [ {required: true, message: '请输入证件号码'}, { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号' } ], telephone: [ {required: true, message: '请输入联系电话'}, {validator: checkPhone}, ], nowAddress: [ {required: true, message: '请输入详细地址'} ], signedMode: [ {required: true, message: '请选择签署方式'} ], parentDate: [ {required: true, message: '请选择签署日期'} ], provideDate: [ {required: true, message: '请选择发放日期'} ], provideDoctorId: [ {required: true, message: '请选择发放医生'} ], presentCode: [ {required: true, message: '请选现住地址', trigger: 'change'} ], sendNumber: [ {required: true, message: '请输入发放数量'} ] }, womanPregnant: false,//是否怀孕 options: { penColor: "#000",//画笔颜色 }, certificateTypeList: [], signedModeList: [], bookHtmlContent: '', modalinfo: { selectedRowKeys: [] }, readyGetChecked: true, doctorInfoList: [], areaInfo: [], fieldNames: { label: 'areaName', value: 'areaCode', children: 'children' }, routerParams: {} } }, created() { this.routerParams = this.$route.query; this.certificateTypeList = getEnumByFlag('folacin_resident_info_certificate_type') this.signedModeList = getEnumByFlag('folacin_resident_info_signed_mode') let questionEnum = getEnumByFlag('folacin_resident_info_question'); questionEnum.forEach(enums => { this.plainOptions.push({label: enums.enumName, value: enums.enumValue}); }); this.getBookHtmlContent() this.getAllDoctorList() this.modelType = this.routerParams.routerFlag; if (this.modelType == 'applyGrant' || this.modelType == 'updateRecord') {//从申请过来的发放 if (this.modelType == 'applyGrant') { this.disabled = true; this.getApplyDetail() } else { this.getStockListDetail() } } else {//由新增过来的发放 this.formData.presentCode = this.unitInfo.areaCode } }, mounted() { let input = this.$refs["input1"]; if (this.ApiUtils.isNotBlank(input)) { input.focus(); } }, watch: {}, methods: { nextFocus(index) { let input = this.$refs["input" + (index + 1)]; if (this.ApiUtils.isBlank(input)) { index = 1; input = this.$refs["input" + index]; } input.focus(); }, onBlur(type, value) { if (value) { if (type == 1) { this.formData.height = Number(value).toFixed(2); } else { this.formData.weight = Number(value).toFixed(2); } this.formData.bmi = !this.formData.height || this.formData.height == 0 ? '-' : this.formData.weight / this.formData.height ? (this.formData.weight / ((this.formData.height / 100) * (this.formData.height / 100))).toFixed(2) : '-'; if (this.formData.bmi >= 28 && this.checkedList.length == 0) { this.formData.recommendEat = "2颗/天(0.8mg/天)"; } if (this.formData.bmi < 28 && this.checkedList.length == 0) { this.formData.recommendEat = "1颗/天(0.4mg/天)"; } } }, onChange(checkedList) { this.formData.recommendEat = "2颗/天(0.8mg/天)"; if (this.formData.bmi >= 28 && checkedList.length == 0) { this.formData.recommendEat = "2颗/天(0.8mg/天)"; } if (this.formData.bmi < 28 && checkedList.length == 0) { this.formData.recommendEat = "1颗/天(0.4mg/天)"; } checkedList.forEach(x => { if (x == '3') { this.formData.recommendEat = "10颗/天(4mg/天)"; } if (x == '4') { this.formData.recommendEat = "13颗/天(5.2mg/天)"; } }) }, checkHeightWeight(rule, value, callback) { if (value == null || value < 0 || value > 1000) { if (rule.field == "height") { callback(new Error('请输入身高,1000以内的数值')); } else { callback(new Error('请输入体重,1000以内的数值')); } } else { callback() } }, checkProvideNumber(rule, value, callback) { if (value == null || value < 1 || value > 999) { callback(new Error('请输入1-999的整数值')); } else { callback() } }, //获取申请详情 getApplyDetail() { this.spinning = true; this.$api.folviteDistributionManage.fetchApplyDetail(this.routerParams.id).then(({data = [], code}) => { this.formData = { applyId: data.id, height: data.height, weight: data.weight, birthDate: data.birthDate, womanName: data.womanName, womenCertificateType: data.womenCertificateType.toString(), womenIdCard: data.womenIdCard, provideNumber: data.provideNumber, telephone: data.telephone, presentCode: data.presentCode, nowAddress: data.nowAddress, signedMode: data.signedMode ? data.signedMode.toString() : "1", applySignUrl: data.applySignUrl, parentDate: data.parentDate, provideDate: moment(new Date()).format('yyyy-MM-DD'), remarks: data.remarks, provideDoctorId: this.userInfo.relationId, recommendEat: data.recommendEat, question: data.question, bmi: data.bmi } if (this.formData.question) { this.checkedList = this.formData.question.split(","); } this.changeWomenCardType() this.changeMenCardType() this.spinning = false; }).catch(() => { this.spinning = false }) }, getStockListDetail() { this.spinning = true; let par = { residentId: this.routerParams.id, menuId: this.routerParams.menuId } this.$api.folviteDistributionManage.fetchFolviteDistributionDetail(par).then(({data = [], code}) => { this.formData = { id: data.id, height: data.height, weight: data.weight, birthDate: data.birthDate, womanName: data.womanName, womenCertificateType: data.womenCertificateType.toString(), womenIdCard: data.womenIdCard, oncePregnant: +data.oncePregnant, pregnantNum: data.pregnantNum, provideNumber: data.provideNumber, telephone: data.telephone, presentCode: data.presentCode, nowAddress: data.nowAddress, signedMode: data.signedMode ? data.signedMode.toString() : "1", applySignUrl: data.applySignUrl, parentDate: data.parentDate, provideDate: moment(new Date()).format('yyyy-MM-DD'), provideDoctorId: this.userInfo.relationId, provideRecordList: data.provideRecordList, remarks: data.remarks, recommendEat: data.recommendEat, } this.formData.bmi = !this.formData.height || this.formData.height == 0 ? '-' : this.formData.weight / this.formData.height ? (this.formData.weight / ((this.formData.height / 100) * (this.formData.height / 100))).toFixed(2) : '-'; if (this.formData.bmi >= 28) { this.formData.recommendEat = "2颗/天(0.8mg/天)"; } if (!this.disabled) { this.formData.recommendEat = data.recommendEat; } if (data.question) { let questionList = data.question.split(","); this.checkedList = questionList; } if (this.formData.womenCertificateType == '1') { let length = this.formData.womenIdCard.length; if (length == 15 | length == 18) { let year = this.formData.womenIdCard.substring(6, 10); let moth = this.formData.womenIdCard.substring(10, 12); let day = this.formData.womenIdCard.substring(12, 14); this.formData.birthDate = year + "-" + moth + "-" + day; } } this.formData.recommendEat = data.recommendEat; this.changeWomenCardType() this.changeMenCardType() this.spinning = false; }).catch(() => { this.spinning = false }) }, getLastRecord() { this.$api.folviteDistributionManage.fetchLastRecord(this.formData.womenIdCard).then(({data = [], code}) => { if (data == null) { return; } this.formData.womanName = data.residentName; this.formData.telephone = data.telephone; this.formData.presentCode = data.presentCode; this.formData.nowAddress = data.nowAddress; }).catch(() => { }) }, getWomenIdCardInfo() { GetUserInfoByCardDevice().then(res => { let {cardno, name, born} = res; this.formData.womanName = name; this.formData.womenCertificateType = '1'; this.formData.womenIdCard = cardno; let year = born.substring(0, 4); let moth = born.substring(4, 6); let day = born.substring(6, 8); this.formData.birthDate = year + "-" + moth + "-" + day; }) }, getBookHtmlContent() {//获取用户知情书模板 let par = { menuId: this.routerParams.menuId } this.$api.common.fetchConsentInfo(par).then(({data}) => { if (this.$api.utils.isBlank(data)) { this.bookHtmlContent = {content: ""} } else { this.bookHtmlContent = data; } }) }, getAllDoctorList() { let par = { menuId: this.menuId } this.$api.common.fetchAllDoctor(par).then(({data}) => { this.doctorInfoList = data }) }, save() { const {isEmpty, data} = this.$refs.signaturePad.saveSignature(); }, getChecked(val) { this.readyGetChecked = false this.$refs.inStockManageInfo.visible = false this.modalinfo.selectedRowKeys = [...val] this.getSelectedMedical(val) }, changeWomenCardType() { let cardInfo = this.cardType.filter(item => item.id == this.formData.womenCertificateType) this.formRules.womenIdCard = cardInfo[0].rule; this.$refs["input3"].focus(); }, changeMenCardType() { let cardInfo = this.cardType.filter(item => item.id == this.formData.menCertificateType) this.formRules.menIdCard = cardInfo[0].rule; }, getSelectedMedical(val) {//获取被选中的药具 if (val.length > 0) { let par = { idList: val.join(','), menuId: this.routerParams.menuId } this.$api.stockManage.fetchMedicalListByIds(par).then(({data = []}) => { this.formData.provideRecordList = data }) } }, addMaterialDis() {//发放 let vm = this; this.$refs.formRef.validate(valid => { if (valid) { if (this.checkedList.length > 0) { let questionList = ""; this.checkedList.forEach(x => { questionList += x + ","; }) this.formData.question = questionList.substring(0, questionList.length - 1); } this.spinning = true; let params = {}; const { id, parentDate, provideNumber, provideDate, presentCode, provideDoctorId, ...others } = vm.formData let parentTime = moment(parentDate).format('YYYY-MM-DD') let provideTme = moment(provideDate).format('YYYY-MM-DD') let presentCodeInfo = ""; if (presentCode != null && presentCode.length > 1) { presentCodeInfo = presentCode; } else { presentCodeInfo = this.unitInfo.areaCode; } let provideDoctorInfo = vm.doctorInfoList.filter(item => item.id == provideDoctorId) params = { id: id, parentDate: parentTime, provideDate: provideTme, presentCode: presentCodeInfo, provideDoctorId: provideDoctorInfo[0].id, provideDoctorName: provideDoctorInfo[0].staffName, provideNumber: provideNumber, ...others } params.menuId = this.routerParams.menuId; let msg = this.modelType == 'updateRecord' ? '确定提交修改吗?' : '确定提交发放吗?' this.$confirm({ title: msg, okType: 'success', onOk: () => { if (this.modelType == 'applyGrant') { params.applyId = vm.formData.applyId this.$api.folviteApplyManage.addApplyGrant(params).then(({code}) => { vm.spinning = false; if (code === 'SUCCESS') { this.$message.success('发放成功!'); this.goBack() } }).catch(() => { vm.spinning = false }); return; } if (this.modelType == 'updateRecord') { this.$api.folviteApplyManage.addFolviteDistributionByApply(params).then(({code}) => { vm.spinning = false; if (code === 'SUCCESS') { this.$message.success('修改成功!'); this.goBack() } }).catch(() => { vm.spinning = false }) return; } this.$api.folviteDistributionManage.fetchAddFolviteDistribution(params).then(({code}) => { vm.spinning = false; if (code === 'SUCCESS') { vm.$message.success('发放成功!'); this.goBack() } }).catch(() => { vm.spinning = false }) }, onCancel: () => { vm.spinning = false; }, }); } }); }, womenIdCardChange() { if (!this.formData.womenIdCard) { return } if (this.modelType == 'add') { this.getLastRecord(); } let womenIdCard = this.formData.womenIdCard.trim(); this.formData.womenIdCard = womenIdCard; if (this.formData.womenCertificateType == 1) { let length = womenIdCard.length; if (length == 15 | length == 18) { let year = this.formData.womenIdCard.substring(6, 10); let moth = this.formData.womenIdCard.substring(10, 12); let day = this.formData.womenIdCard.substring(12, 14); this.formData.birthDate = year + "-" + moth + "-" + day; } } }, //打开库存弹框 openStockModel() { this.readyGetChecked = true let vm = this this.$nextTick(() => { vm.$refs.inStockManageInfo.visible = true; }) }, goBack() { this.formData = {}; if (process.env.NODE_ENV !== "dev") { window.top.postMessage({ messageType: 'THIRD_PAGECHANGE', name: `${this.routerParams.menuCode}`, source: "yesuan" }, '*'); return; } if (this.routerParams.routerFlag == "applyGrant") { this.$router.push("/Home/folviteApply"); closedDetail('/inStock/addMaterialDistribution', '/Home/folviteApply'); } else { this.$router.push("/Home/folviteDistribution"); closedDetail('/inStock/addMaterialDistribution', '/Home/folviteDistribution') } }, } } </script> <style scoped lang="less"> .title_img { display: inline-block; width: 24px; height: 24px; margin-top: -5px; margin-left: 10px; } .title_font { font-family: PingFang SC; color: #595959; font-weight: 600; font-size: 16px; line-height: 22px; margin: 16px 0px 16px 18px; } </style> <style lang="less"> .book { .ant-card-head-title { padding: 0px !important; } } .sign { position: absolute; background: #FFF1F0; border-radius: 0px 0px 24px 0px; width: 60px; height: 40px; padding: 0px 16px; } .opt { float: right; margin-top: 10px; } .table_input { .ant-table-tbody > tr > td { padding: 5px !important; overflow-wrap: break-word; } } .modal_table { .ant-form-item { margin-bottom: 0px !important; } } .ant-checkbox-group-item { display: block; margin-top: 20px; } .ant-checkbox-group { width: 100%; } </style>