jyy-smart-canteen-h5/pages/survey/details.vue

409 lines
10 KiB
Vue

<template>
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
<view class="report-detail">
<u-loading-page :loading="sumbitStaus" loading-text="提交中..."></u-loading-page>
<view style="border-bottom: 1rpx solid #ccc;margin-bottom: 20rpx;" v-if="!sumbitStaus">
<view class="info-item">
<view class="label">体检日期</view>
<view class="value-wrapper" @click="dateShow=true">
<!-- <uni-easyinput v-model="medicalDate" placeholder="请选择体检日期" border="none" maxlength="24" /> -->
<view class="value" :class="medicalDate? '' :'placeholder'">{{medicalDate || '请选择体检日期'}}</view>
</view>
</view>
<view class="info-item">
<view class="label">体检机构</view>
<view class="value-wrapper" style="border: none;">
<uni-easyinput v-model="medicalMechanism" placeholder="请输入体检机构" maxlength="24" />
</view>
</view>
</view>
<u-datetime-picker :minDate="minDate" :maxDate="maxDate" :show="dateShow" v-model="defaultDate" mode="date"
:closeOnClickOverlay="true" :formatter="formatter" @cancel="dateShow = false" @confirm="birthDayConfirm">
</u-datetime-picker>
<scroll-view style="width: 100%;height: 70vh;" scroll-y="true" v-if="!sumbitStaus">
<table style="width: 100%;" v-for="(itmes,index) in reportList">
<tr>
<td colspan="3" align="left"><span>{{itmes.medicalProjectName}}</span></td>
</tr>
<tr>
<td><span>项目名称</span></td>
<td><span>检查结果</span></td>
<td><span>单位</span></td>
</tr>
<tr v-for="(itme,indexd) in itmes.healthMedicalReportDetails">
<td>{{itme.medicalProjectDetailName}}</td>
<td><u-input
v-model="itme.result"
placeholder="请输入结果"
maxlength="30"
show-word-limit
/></td>
<td>{{itme.medicalProjectDetailUnit}}</td>
</tr>
</table>
<!-- <view style="height: auto;padding-bottom: 20rpx;">
<view v-for="(item,index) in this.reportList":key="index">
<view class="list-title">
<text>{{item.medicalProjectName}}</text>
</view>
<view class="list-item" v-for="(dItem,dIndex) in item.medicalReportDetailVOList":key="dIndex">
<view class="label">
<text>{{dItem.medicalProjectDetailName}}</text>
<text v-if="dItem.medicalProjectDetailUnit">({{ dItem.medicalProjectDetailUnit }})</text>
</view>
<view class="value-wrapper">
<u-input v-model="dItem.result" :placeholder="'请输入'+dItem.medicalProjectDetailName" border="none" maxlength="24"></u-input>
</view>
</view>
</view>
</view> -->
</scroll-view>
<!-- 提交按钮 -->
<view class="submit-btn" v-if="!sumbitStausV">
<u-button
shape="squrd"
@click="saveReport"
:customStyle="{
width: '100%',
height: '88rpx',
background: '#ff9253',
color: '#ffffff',
border: 'none'
}" style="font-size: 28rpx;"
>保存</u-button>
</view>
</view>
</template>
<script>
import { listTemplateApi,getTemplateInfoApi,getMedicalReportInfoApi,editMedicalReportApi } from '@/api/mine/survey.js'
export default {
name: 'details',
data() {
return {
fontValue:uni.getStorageSync('fontSize') || 8,
dateShow: false,
defaultDate: Number(new Date()),
minDate: 7200000,
maxDate: Number(new Date()),
medicalDate:uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
medicalMechanism:"",
paramsData:{},
medicalTemplateId:"",
reportList:[],
sumbitStaus:false,
sumbitStausV:true,
reportModelId:"",
}
},
onLoad(opt) {
console.log(opt)
opt = JSON.parse(opt.params)
this.paramsData = opt
if(this.paramsData.medicalId&&this.paramsData.medicalId!=""){
// 编辑
this.getMedicalReportInfo()
this.medicalTemplateId = this.paramsData.medicalTemplateId
this.medicalMechanism = this.paramsData.medicalMechanism
this.medicalDate = this.paramsData.medicalDate
}else{
//新增
this.sumbitStausV=false;
this.listTemplate()
}
},
methods: {
//模板列表
async listTemplate() {
let param = { }
const res = await listTemplateApi(param)
console.log(res, '模板--------')
this.medicalTemplateId = res.data[0].medicalTemplateId
this.getTemplateInfo()
},
//模板详情
async getTemplateInfo() {
let param = {
"medicalTemplateId": this.medicalTemplateId,
}
const res = await getTemplateInfoApi(param)
console.log(res, '模板--------')
this.reportList = res.data
},
//模板详情
async getMedicalReportInfo() {
let param = {
"medicalId": this.paramsData.medicalId,
}
const res = await getMedicalReportInfoApi(param)
this.reportList = res.data
console.log(res, '详情--------')
},
saveReport() {
if(!this.sumbitStaus){
this.sumbitStaus=true
console.log("确认获取数据",this.reportList)
if(this.medicalDate==null||this.medicalDate==""||this.medicalDate==undefined||this.medicalMechanism==null||this.medicalMechanism==""||this.medicalMechanism==undefined){
this.$modal.msgSuccess("请检查机构或时间是否填入");
return;
}
let params={
"medicalTemplateId":this.medicalTemplateId,
"medicalDate":this.medicalDate,
"medicalMechanism":this.medicalMechanism,
"userId":uni.getStorageSync('userId'),
"reportDatas":this.reportList
}
console.log("params",params)
editMedicalReportApi(params).then(response => {
this.sumbitStaus=false
uni.navigateBack()
});
// let param = {}
// if(this.paramsData.medicalId&&this.paramsData.medicalId!=""){
// param = {
// "medicalId": this.paramsData.medicalId,
// "userId": uni.getStorageSync('userId'),
// "medicalDate": this.medicalDate,
// "medicalTemplateId": this.medicalTemplateId,
// "medicalMechanism": this.medicalMechanism,
// "reportProjectVOS":this.reportList
// }
// }else{
// param = {
// "userId": uni.getStorageSync('userId'),
// "medicalDate": this.medicalDate,
// "medicalTemplateId": this.medicalTemplateId,
// "medicalMechanism": this.medicalMechanism,
// "reportProjectVOS":this.reportList
// }
// }
// editMedicalReportApi(param).then((res)=>{
// if(res.code==200){
// this.sumbitStaus=false
// uni.navigateBack()
// }else{
// this.sumbitStaus=false
// }
// }).catch(()=>{
// this.sumbitStaus=false
// })
}
},
// 体检日期
birthDayConfirm(e) {
this.medicalDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
this.dateShow = false;
},
formatter(type, value) {
if (type === 'year') {
return `${value}`
}
if (type === 'month') {
return `${value}`
}
if (type === 'day') {
return `${value}`
}
return value
},
},
}
</script>
<style scoped>
.report-detail {
background-color: #fff;
min-height: 94vh;
}
.info-item {
display: flex;
align-items: center;
justify-content: center;
padding: 28rpx;
border-bottom: 1rpx solid #FFFFFF;
&:last-child {
border-bottom: none;
}
.label {
width: 25%;
font-size: 32rpx;
color: #333;
margin-right: 10rpx;
}
.value-wrapper {
display: flex;
align-items: center;
border: 1px solid rgb(229, 229, 229);
border-radius: 10rpx;
width: 70%;
height: 70rpx;
.value {
font-size: 28rpx;
color: #333;
padding-left: 16rpx;
&.placeholder {
color: #999;
}
}
}
}
.list-title{
height: 50rpx;
width: 200rpx;
padding-left: 10rpx;
padding-right: 10rpx;
margin-bottom: 20rpx;
background: red;
color: #FFF;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
.list-item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid #ccc;
margin-bottom: 10rpx;
.label {
font-size: 32rpx;
color: #333;
margin-right: 10rpx;
width: 35%;
}
.value-wrapper {
display: flex;
align-items: center;
border: 1px solid rgb(229, 229, 229);
border-radius: 10rpx;
width: 60%;
height: 60rpx;
}
}
.submit-btn{
position: fixed;
left: 30rpx;
right: 30rpx;
bottom: 40rpx;
display: flex;align-items: center;
justify-content: space-between;
}
.addReportStyle{
width: 880px;
height: 100%;
margin-right: 0;
margin-left: auto;
}
.el-dialog {
margin: 0 !important; /* 重置默认的margin */
position: fixed !important; /* 固定定位 */
top: 20px; /* 距离顶部距离 */
right: 20px; /* 靠右距离 */
}
.remind-question{
width: 100%;
height: 50px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.remind-title{
width: 100%;
height: 40px;
font-size: 16px;
font-weight: bold;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
table td, table th{
border: 1px solid #dfe6ec;
}
.table-title {
height: 45px;
background-color: #f8f8f9;
}
.table-label{
height: 45px;
width: 110px;
min-width: 100px;
background-color: #f8f8f9;
}
.table-content{
min-width: 250px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
.box-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box {
width: 100%;
height: 100%;
min-width: 1000px;
text-align: center;
color: rgba(80, 81, 82, .9098039215686274);
}
.box .title {
margin-top: 40px;
font-size: 24px;
font-weight: 700;
color: #101d34;
}
.header-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 600;
margin-top: 40px;
-ms-flex-pack: distribute;
justify-content: space-around;
font-size: 16px;
font-weight: 400;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #8195a5;
border-bottom: 1px solid #e5ebef;
padding-bottom: 20px;
margin-bottom: 40px;
}
.tabledata span{
font-size: 16px;
font-weight: 700;
color: #000;
}
</style>