320 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			320 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
|  <template>
 | |
|   <ai-detail>
 | |
|     <template slot="title">
 | |
|       <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
 | |
|       </ai-title>
 | |
|     </template>
 | |
|     <template slot="content">
 | |
|       <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
 | |
|       <div v-show="currIndex === 0">
 | |
|         <ai-card title="基本信息" v-show="currIndex === 0">
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|               label-width="120px">
 | |
|               <ai-info-item label="姓名" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="上报时间" :value="info.createTime"></ai-info-item>
 | |
|               <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
 | |
|               <ai-info-item label="所属地区" :value="info.areaName"></ai-info-item>
 | |
|               <ai-info-item label="详细地址" isLine :value="info.address"></ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|       </div>
 | |
|       <ai-card title="每日上报" v-show="currIndex === 1">
 | |
|         <template #content>
 | |
|           <ai-table
 | |
|             class="detail-table__table"
 | |
|             :tableData="tableData"
 | |
|             :col-configs="colConfigs"
 | |
|             :total="total"
 | |
|             :current.sync="search.current"
 | |
|             :size.sync="search.size"
 | |
|             @getList="getList">
 | |
|             <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
 | |
|               <template slot-scope="{ row }">
 | |
|                 <div class="table-options">
 | |
|                   <el-button type="text" @click="toDetail(row.id)">详情</el-button>
 | |
|                 </div>
 | |
|               </template>
 | |
|             </el-table-column>
 | |
|           </ai-table>
 | |
|           <ai-dialog
 | |
|             :visible.sync="isShow"
 | |
|             width="890px"
 | |
|             customFooter
 | |
|             title="上报详情">
 | |
|             <ai-bar title="健康状况"></ai-bar>
 | |
|             <ai-wrapper
 | |
|               label-width="120px">
 | |
|               <ai-info-item label="当前体温">
 | |
|                 <span :style="{color: reportInfo.temperature < 35 || reportInfo.temperature > 38 ? '#FF4466' : '#42D784'}">{{ reportInfo.temperature }}℃</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="14天内是否接触新冠确诊或疑似患者">
 | |
|                 <span :style="{color: reportInfo.touchInFourteen === '0' ? '#42D784' : '#FF4466'}">{{ $dict.getLabel('epidemicTouchInFourteen', reportInfo.touchInFourteen) }}</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="当前健康状况" isLine>
 | |
|                 <span :style="{color: !reportInfo.isHealth ? '#42D784' : '#FF4466'}">{{ reportInfo.healthName }}</span>
 | |
|               </ai-info-item>
 | |
|             </ai-wrapper>
 | |
|             <ai-bar title="核酸检测信息"></ai-bar>
 | |
|             <ai-wrapper
 | |
|               label-width="120px">
 | |
|               <ai-info-item label="检测日期">
 | |
|                 <span>{{ reportInfo.checkTime && reportInfo.checkTime.split(' ')[0] }}</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="检测结果">
 | |
|                 <span :style="{color: reportInfo.checkResult === '0' ? '#42D784' : '#FF4466'}">{{ $dict.getLabel('epidemicRecentTestResult', reportInfo.checkResult) }}</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="健康码状态">
 | |
|                 <span :style="{color: reportInfo.healthCode === '0' ? '#42D784' : '#FF4466'}">{{ $dict.getLabel('epidemicHealthCode', reportInfo.healthCode) }}</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="已接种疫苗次数">
 | |
|                 <span :style="{color: reportInfo.vaccine !== '0' ? '#42D784' : '#FF4466'}">{{ $dict.getLabel('epidemicVaccineTime', reportInfo.vaccine) }}</span>
 | |
|               </ai-info-item>
 | |
|               <ai-info-item label="本人健康码截图" isLine>
 | |
|                 <ai-uploader
 | |
|                   :instance="instance"
 | |
|                   v-model="reportInfo.checkPhoto"
 | |
|                   disabled
 | |
|                   :limit="9">
 | |
|                 </ai-uploader>
 | |
|               </ai-info-item>
 | |
|             </ai-wrapper>
 | |
|             <div class="dialog-footer" slot="footer">
 | |
|               <el-button @click="isShow = false">关闭</el-button>
 | |
|             </div>
 | |
|           </ai-dialog>
 | |
|         </template>
 | |
|       </ai-card>
 | |
|       <div v-show="currIndex === 2">
 | |
|         <ai-card title="异常处理">
 | |
|           <template #right>
 | |
|             <el-button type="primary" @click="release">解除异常</el-button>
 | |
|           </template>
 | |
|           <template #content>
 | |
|             <ai-wrapper
 | |
|               label-width="120px">
 | |
|               <ai-info-item label="姓名" :value="info.name"></ai-info-item>
 | |
|               <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
 | |
|               <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
 | |
|               <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
 | |
|               <ai-info-item label="人员类别" isLine :value="dict.getLabel('epidemicMemberType', info.type)"></ai-info-item>
 | |
|               <ai-info-item label="异常状况">
 | |
|                 <span :style="{color: info.unusual ? 'red' : '#333'}">{{ info.unusual || '-' }}</span>
 | |
|               </ai-info-item>
 | |
|             </ai-wrapper>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-card title="异常情况记录">
 | |
|           <template #right>
 | |
|             <el-button type="primary" @click="isShowAdd = true">添加</el-button>
 | |
|           </template>
 | |
|           <template #content>
 | |
|             <ai-table
 | |
|               :tableData="recordList"
 | |
|               :col-configs="recordConfigs"
 | |
|               :total="recordTotal"
 | |
|               :current.sync="recordSerch.current"
 | |
|               :size.sync="recordSerch.size"
 | |
|               @getList="getRecordList">
 | |
|               <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
 | |
|                 <template slot-scope="{ row }">
 | |
|                   <div class="table-options">
 | |
|                     <el-button type="text" @click="remove(row.id)">删除</el-button>
 | |
|                   </div>
 | |
|                 </template>
 | |
|               </el-table-column>
 | |
|             </ai-table>
 | |
|           </template>
 | |
|         </ai-card>
 | |
|         <ai-dialog
 | |
|           :visible.sync="isShowAdd"
 | |
|           width="800px"
 | |
|           @close="form.content = ''"
 | |
|           title="添加异常记录"
 | |
|           @onConfirm="onConfirm">
 | |
|           <el-form class="ai-form" label-width="120px" :model="form" ref="form">
 | |
|             <el-form-item label="记录" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入记录' }]">
 | |
|               <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入记录" show-word-limit></el-input>
 | |
|             </el-form-item>
 | |
|           </el-form>
 | |
|         </ai-dialog>
 | |
|       </div>
 | |
|     </template>
 | |
|   </ai-detail>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   export default {
 | |
|     name: 'Detail',
 | |
| 
 | |
|     props: {
 | |
|       instance: Function,
 | |
|       dict: Object,
 | |
|       params: Object
 | |
|     },
 | |
| 
 | |
|     data () {
 | |
|       return {
 | |
|         total: 0,
 | |
|         info: {},
 | |
|         id: '',
 | |
|         isShowAdd: false,
 | |
|         recordTotal: 0,
 | |
|         recordSerch: {
 | |
|           current: 1,
 | |
|           size: 10
 | |
|         },
 | |
|         search: {
 | |
|           current: 1,
 | |
|           size: 10
 | |
|         },
 | |
|         form: {
 | |
|           content: ''
 | |
|         },
 | |
|         recordConfigs: [
 | |
|           {prop: 'content', label: '说明', align: 'center' },
 | |
|           {prop: 'createTime', label: '创建时间', align: 'center'}
 | |
|         ],
 | |
|         reportInfo: {},
 | |
|         isShow: false,
 | |
|         currIndex: 0,
 | |
|         tableData: [],
 | |
|         recordList: [],
 | |
|         colConfigs: [
 | |
|           {prop: 'createTime', label: '上报日期', align: 'center', dateFormart: 'YYYY-MM-DD'},
 | |
|           {prop: 'status', label: '健康状态', align: 'center', formart: v => v === '0' ? '异常' : '正常' }
 | |
|         ],
 | |
|         tabList: ['基本信息', '每日上报']
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     created () {
 | |
|       if (this.params && this.params.id) {
 | |
|         this.id = this.params.id
 | |
|         this.dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
 | |
|           this.getInfo(this.params.id)
 | |
|           this.getList(this.params.id)
 | |
|           this.getRecordList(this.params.id)
 | |
|         })
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|       getInfo (id) {
 | |
|         this.instance.post(`/app/appepidemicreportmember/queryDetailById?id=${id}`).then(res => {
 | |
|           if (res.code === 0) {
 | |
|             this.info = res.data
 | |
|             if (res.data.status === '0') {
 | |
|               this.tabList = ['基本信息', '每日上报', '异常处理']
 | |
|             } else {
 | |
|               this.tabList = ['基本信息', '每日上报']
 | |
|             }
 | |
|             this.currIndex = 0
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       getRecordList (id) {
 | |
|         this.instance.post(`/app/appepidemicunusuallog/list`, null, {
 | |
|           params: {
 | |
|             ...this.search,
 | |
|             recordId: id
 | |
|           }
 | |
|         }).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.recordList = res.data.records
 | |
|             this.recordTotal = res.data.total
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       onConfirm() {
 | |
|         this.$refs.form.validate(v => {
 | |
|           if (v) {
 | |
|             this.instance.post('/app/appepidemicunusuallog/addOrUpdate', {
 | |
|               ...this.form,
 | |
|               recordId: this.params.id
 | |
|             }).then(res => {
 | |
|               if (res?.code == 0) {
 | |
|                 this.isShowAdd = false
 | |
|                 this.getRecordList(this.params.id)
 | |
|                 this.$message.success('添加成功!')
 | |
|               }
 | |
|             })
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       release () {
 | |
|         this.$confirm('确定解除异常?').then(() => {
 | |
|           this.instance.post(`/app/appepidemicreportmember/release`, {
 | |
|             id: this.params.id
 | |
|           }).then(res => {
 | |
|             if (res.code == 0) {
 | |
|               this.$message.success('解除异常成功!')
 | |
|               this.currIndex = 0
 | |
|               this.getInfo(this.params.id)
 | |
|             }
 | |
|           })
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       remove(id) {
 | |
|         this.$confirm('确定删除该数据?').then(() => {
 | |
|           this.instance.post(`/app/appepidemicunusuallog/delete?ids=${id}`).then(res => {
 | |
|             if (res.code == 0) {
 | |
|               this.$message.success('删除成功!')
 | |
|               this.getList(this.params.id)
 | |
|             }
 | |
|           })
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       toDetail (id) {
 | |
|         this.instance.post(`/app/appepidemichealthreport/queryDetailById?id=${id}`).then(res => {
 | |
|           if (res.code === 0) {
 | |
|             this.reportInfo = res.data
 | |
|             this.reportInfo.checkPhoto = JSON.parse(res.data.checkPhoto)
 | |
|             let healthName = ''
 | |
|             this.reportInfo.isHealth = false
 | |
|             res.data.health.split(',').forEach(v => {
 | |
|               if (v > 0) {
 | |
|                 this.reportInfo.isHealth = true
 | |
|               }
 | |
|               healthName = healthName + this.dict.getLabel('epidemicRecentHealth', v)
 | |
|             })
 | |
|             this.reportInfo.healthName = healthName
 | |
| 
 | |
|             this.isShow = true
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       getList (id) {
 | |
|         this.instance.post(`/app/appepidemichealthreport/list`, null, {
 | |
|           params: {
 | |
|             ...this.search,
 | |
|             memberId: id
 | |
|           }
 | |
|         }).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.tableData = res.data.records
 | |
|             this.total = res.data.total
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       cancel (isRefresh) {
 | |
|         this.$emit('change', {
 | |
|           type: 'list',
 | |
|           isRefresh: !!isRefresh
 | |
|         })
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
| </style>
 |