carbasics2023_web_pad_v4/src/views/thrombolysis/components/throm-before2.vue

<template>
	<div class="throm-before2">
		<a-table
			:columns="columns"
			:data-source="dataList"
			:pagination="false"
			bordered
			key="table"
			rowKey="id"
			size="small"
			:locale="tablenodata"
			class="throm-before-table"
		>
			<template slot="testResult" slot-scope="text, data">
				<div>
					<a-icon style="color: #f88152" type="arrow-up" v-if="data.testResultType == 's'" />
					<a-icon type="arrow-down" style="color: #f88152" v-if="data.testResultType == 'x'" />
					<span :style="{ paddingLeft: !data.testResultType ? '26px' : '4px', }" >{{ text }}</span>
				</div>
			</template>
		</a-table>
			
		<div class="throm-common-button" v-if="!outside">
			<a-button :disabled="writeAble" class="" block type="primary" size="large" @click="onSubmit">下一步</a-button>
		</div>
	</div>
</template>

<script>
import { queryFirstAidInspectData } from 'api';
import { mapMutations, mapState } from 'vuex';
export default {
	name: 'Inspect',
	data() {
		const columns = [
			{
				title: '类型名', //表头
				dataIndex: 'testItemTypeName', //展示字段
				key: '0',
				// width: 180,
				align: 'center',
			},
			{
				title: '项目名', //表头
				dataIndex: 'testItemName', //展示字段
				key: '1',
				ellipsis: true,
				align: 'center',
			},
			{
				title: '明细名', //表头
				dataIndex: 'testDetailitemName', //展示字段
				key: '2',
				ellipsis: true,
				align: 'center',
			},
			{
				title: '结果', //表头
				dataIndex: 'testResult', //展示字段
				key: '3',
				// width: 150,
				align: 'center',
				scopedSlots: { customRender: 'testResult' },
			},
			{
				title: '单位', //表头
				dataIndex: 'testResultValueUnit', //展示字段
				key: '4',
				// width: 150,
				align: 'center',
			},
			{
				title: '参考值', //表头
				dataIndex: 'referenceValue', //展示字段
				key: '5',
				// width: 180,
				align: 'center',
			},
			{
				title: '校验时间', //表头
				dataIndex: 'testDate', //展示字段
				key: '6',
				// width: 220,
				align: 'center',
			},
		];
		return {
			tablenodata: {
				emptyText: () => (
					<div>
						<div style="height: 30vh; display: flex; justify-content: center; align-items: center; font-size: 5rem">
							<a-empty description="暂无数据" />
						</div>
					</div>
				),
			},
			dataList: [],
			columns,
			activeTabKey: 'tab1',
			tabList: [
				{
					key: 'tab1',
					tab: '检验1',
				},
				{
					key: 'tab2',
					tab: '检验2',
				},
				{
					key: 'tab3',
					tab: '检验3',
				},
			],
		};
	},
	props: ['outside'],
	components: {},
	computed: {
		...mapState('storm', ['spinning', 'showNav']),
		...mapState('patient', ['patientData', 'timerData', 'writeAble']),
	},
	created() {
		this.handlequeryFirstAidInspectData();
	},
	methods: {
		async handlequeryFirstAidInspectData() {
			const { firstAidId } = this.patientData;
			const res = await queryFirstAidInspectData({ firstAidId });
			const { code, msg, data } = res;
			if (code === 200) {
				data.forEach((item) => {
					// 前"0.4～8.0"
					let q = item.referenceValue?.split('～')[0];
					let h = item.referenceValue?.split('～')[1];
					// item.testResult
					if (item.testResult - 0 > h - 0) {
						item.testResultType = 's';
					}
					if (item.testResult - 0 < q - 0) {
						item.testResultType = 'x';
					}
					console.log('item.testResultType: ', item.testResultType);
				});
				this.dataList = data;
				if(!data.length){
					for(let i in 10){
						this.dataList.push({id: i})
					}
				}
				console.log('this.dataList: ', this.dataList);
			}
		},
		onTabChange(key, type){
			this.activeTabKey = key;
		},
		onSubmit(){
			this.$emit('next')
		}
	},
};
</script>


<style lang="less" scoped>
	.throm-before2{
		// padding: 1rem 0;
		.btns{
			margin-top: 2rem;
		}
	}
</style>
<style lang="less">
	.throm-before2{
		
		.throm-before-table{
			.ant-table-bordered .ant-table-body > table{
				border-width: 0;
				border-bottom: 2px solid #000000;
				
			}
			.ant-table-thead > tr > th{
				background-color: #fff;
				border-bottom: 2px solid #000000;
			}
			.ant-table-bordered .ant-table-thead > tr > th, 
			.ant-table-bordered .ant-table-tbody > tr > td{
				&:last-child{
					border-right-width: 0;
				}
			}
			.ant-table-tbody{
				
			}
		}
	}
</style>