<template> <div> <a-spin tip="加载中..." :spinning="spinning"> <a-card> <div> <div> <span style="font-size: 18px;font-weight: 600;color: #262626"> 叶酸发放登记</span> </div> <div style="margin: 30px 0px"> <div class="divider_my"><span class="midText">居民信息</span></div> </div> <div style="clear: both"></div> <div style="margin-top: 16px"> <div class="detail_title"> <div class="divider_my_dashed"> <span class="midText" style="font-size: 14px;color: #FF4D80;">女方信息</span> </div> <div style="clear: both"></div> </div> <a-descriptions bordered class="folvite_title"> <a-descriptions-item label="姓名"> {{detailInfo.womanName || '--'}} </a-descriptions-item> <a-descriptions-item label="证件类型"> {{detailInfo.womenCertificateTypeName || '--'}} </a-descriptions-item> <a-descriptions-item label="证件号码"> {{detailInfo.womenIdCard || '--'}} </a-descriptions-item> <a-descriptions-item label="是否曾经怀孕"> {{detailInfo.oncePregnantName || '--'}} </a-descriptions-item> <a-descriptions-item label="孕次"> {{detailInfo.pregnantNum || '--'}} </a-descriptions-item> </a-descriptions> <div class="detail_title" style="border-top: 0px"> <div class="divider_my_dashed"> <span class="midText" style="font-size: 14px;color: #FF4D80;">男方信息</span> </div> <div style="clear: both"></div> </div> <a-descriptions bordered class="folvite_title"> <a-descriptions-item label="姓名"> {{detailInfo.manName || '--'}} </a-descriptions-item> <a-descriptions-item label="证件类型"> {{detailInfo.menCertificateTypeName || '--'}} </a-descriptions-item> <a-descriptions-item label="证件号码"> {{detailInfo.menIdCard || '--'}} </a-descriptions-item> </a-descriptions> <div class="detail_title" style="border-top: 0px"> <div class="divider_my_dashed"> <span class="midText" style="font-size: 14px;color: #FF4D80;">其他信息</span> </div> <div style="clear: both"></div> </div> <a-descriptions bordered class="folvite_title"> <a-descriptions-item label="联系电话"> {{detailInfo.telephone || '--'}} </a-descriptions-item> <a-descriptions-item label="现在住址"> {{detailInfo.presentCodeName || '--'}} </a-descriptions-item> <a-descriptions-item label="详细地址"> {{detailInfo.nowAddress || '--'}} </a-descriptions-item> <a-descriptions-item label="签署方式" :span="routerParams.source == 2 ? 2: 1"> {{detailInfo.signedModeName || '--'}} </a-descriptions-item> <a-descriptions-item label="签署日期" :span="routerParams.source == 2 ? 2: 1"> {{detailInfo.parentDate || '--'}} </a-descriptions-item> <a-descriptions-item label="上传照片" v-if="routerParams.source != 2"> <img style="cursor: pointer" width="120px" height="120px" :src="detailInfo.consentUrl" @click="showVisible=true"/> </a-descriptions-item> </a-descriptions> <!-- <div class="card_info"> <a-card class="book" :headStyle="{background: '#FAFAFA'}" v-if="routerParams.source == 2"> <div slot="title" style="text-align: center;"> <span style="color: #262626;font-size: 14px">知情同意书</span> </div> <div> <div v-html="bookHtmlContent.content"> </div> </div> </a-card> </div>--> <div v-if="routerParams.source == 2"> <img style="width: 100%;height: 160px" :src="detailInfo.applySignUrl"> </div> <!-- <a-descriptions bordered layout="vertical" class="no_border">--> <!-- <a-descriptions-item label="上传照片">--> <!-- {{detailInfo.batchNumber || '--'}}--> <!-- </a-descriptions-item>--> <!-- </a-descriptions>--> </div> <div style="margin: 30px 0px"> <div class="divider_my"><span class="midText">发放信息</span></div> </div> <div style="clear: both"></div> <a-descriptions bordered :column="2" class="folvite_title"> <a-descriptions-item label="发放日期"> {{detailInfo.provideDate || '--'}} </a-descriptions-item> <a-descriptions-item label="发放医生"> {{detailInfo.provideDoctorName || '--'}} </a-descriptions-item> </a-descriptions> <div class="detail_title" style="border-top: 0px"> <div class="divider_my_dashed"> <span class="midText" style="font-size: 14px;color: #FF4D80;">叶酸发放种类</span> </div> <div style="clear: both"></div> </div> <a-table :dataSource="detailInfo.provideRecordList" :columns="columns" rowKey="id" :pagination="false" bordered > </a-table> <a-descriptions bordered :column="1" class="remark_info folvite_title "> <a-descriptions-item label="备注"> {{detailInfo.remarks || '--'}} </a-descriptions-item> </a-descriptions> </div> <div style="text-align: center;margin-top: 40px"> <a-button class="ant-table-btn" @click="goBack">关闭</a-button> </div> </a-card> </a-spin> <a-modal title="查看知情同意书" :visible="showVisible" @cancel="showVisible = false" @ok="showVisible=false" loading="true" :maskClosable="false" width="800px"> <div> <img style="width: 100%" :src="detailInfo.consentUrl" height="100%"/> </div> </a-modal> </div> </template> <script> import moment from 'moment'; import {closedDetail} from "../../../utils/common"; import router from "../../../../router"; const columns = [ { title: '供应商', dataIndex: 'supplierName', ellipsis: true }, { title: '品牌', dataIndex: 'brandName', ellipsis: true }, { title: '批次号', dataIndex: 'batchNumber', ellipsis: true }, { title: '当前库存', dataIndex: 'number', ellipsis: true }, { title: '发放数量', dataIndex: 'sendNumber', ellipsis: true }, ] export default { data() { return { routerParams: {}, detailInfo: {}, spinning: false, bookHtmlContent: {content: undefined}, columns, showVisible: false } }, created() { this.routerParams = this.$route.query this.getStockListDetail() this.getBookHtmlContent() }, methods: { getBookHtmlContent() {//获取用户知情书模板 this.$api.common.fetchConsentInfo().then(({data}) => { if (this.$api.utils.isBlank(data)) { this.bookHtmlContent = {content: ""} } else { this.bookHtmlContent = data; } }) }, getStockListDetail() { this.spinning = true let par = { residentId: this.routerParams.id } this.$api.folviteDistributionManage.fetchFolviteDistributionDetail(par).then(({data = [], code}) => { this.spinning = false; this.detailInfo = data }) }, goBack() { this.$router.push("/Home/folviteDistribution"); closedDetail('/inStock/inStockManageDetail', '/Home/folviteDistribution') }, }, } </script> <style lang="less" scoped> .detail_title { padding: .1px 16px; border: 1px solid #F0F0F0; border-bottom: 0px } </style> <style lang="less"> .no_border { border-top: 0px; } .folvite_title { .ant-descriptions-item-label { width: 135px; } } .card_info { .ant-card-head-title { padding: 9px 0px !important; } .ant-card-head { min-height: 32px; } .ant-card-bordered { border-top: 0px !important; border-bottom: 0px !important; } } .remark_info { .ant-descriptions-view { .ant-descriptions-bordered .ant-descriptions-view { border: 0px !important; } } } </style>