carbasics2023_web_pad_v4/src/views/document/index.vue

<template>
	<div class="document">
		<div class="doc-list">
			<div class="doc-list-action">
				<div class="doc-list-title">
					全部患者
				</div>
				<div class="doc-list-btns">
					<a-input placeholder="请输入患者姓名 (支持拼音、首拼、关键字)" style="width: 34vw" size="large" v-model="searchVal"
						@pressEnter="onSearch(1)" allowClear>
						<a-icon slot="prefix" type="search" @click="onSearch(1)" />
					</a-input>
				</div>
			</div>
			<div class="doc-list-table">
				<a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 700, x: 800 }"
					:locale="{ emptyText: '暂无数据'}" rowKey="firstAidId" size="middle" :pagination="pagination">
					<template slot="action" slot-scope="text, row">
						<a-button type="link" @click="editReport(row, 'patientDetail')">详情</a-button>
						<a-button type="link" @click="checkReport(row, 'docReport')">报告单</a-button>
						<a-button type="link" @click="checkReport(row, 'docCT')">CT影像</a-button>
						<a-button type="link" @click="checkReport(row, 'docInspect')">检验报告</a-button>
					</template>
					<template slot="sex" slot-scope="text">
						<div v-if="text == 0">男</div>
						<div v-if="text == 1">女</div>
					</template>
				</a-table>
			</div>
		</div>
		<!-- <PatientCreate ref="patientCreate" @on-success="onSearch" :firstAidData="firstAidData" :carList="carList"
			:carNo="carNo" /> -->
		<DocReport ref="docReport"></DocReport>
		<DocCT ref="docCT"></DocCT>
		<DocInspect ref="docInspect"></DocInspect>
		<PatientDdit ref='patientddit' :patientId="patientId" @on-success="onSearch(pageNum)" :carList="carList"
			:carNo="carNo"></PatientDdit>
		<doc-detail ref='patientDetail'></doc-detail>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	// import PatientCreate from '@/views/Patient/components/patient-create.vue';
	import DocDetail from './components/detail.vue';
	import DocReport from '@/views/document/components/report.vue';
	import DocCT from '@/views/document/components/ct.vue';
	import DocInspect from '@/views/document/components/inspect.vue';
	import PatientDdit from '@/views/Patient/components/patient-create.vue';
	import {
		getList,
		selectList
	} from 'api/index.js';
	export default {
		name: "Document",
		components: {
			// PatientCreate,
			DocDetail,
			DocReport,
			DocCT,
			DocInspect,
			PatientDdit
		},
		data() {
			return {
				searchVal: '', // 搜索字段
				dataSource: [],
				pageNum: 1,
				pageSize: 10,
				pagination: {
					onChange: (page, pageSize) => {
						this.pageNum = page;
						this.pageSize = pageSize
						this.getData();
					},
					onShowSizeChange: (current, size) => {
						this.pageNum = current;
						this.pageSize = size
						this.getData();
					},
					pageSize: 10,
					total: 0,
					showQuickJumper: true,
					showLessItems: true,
					showSizeChanger: true,
					showTotal: (total, range) => `总共 ${total} 条记录`, // 显示总数

				},
				columns: [{
						title: '姓名',
						width: 120,
						dataIndex: 'patientName',
						key: 'name',
						fixed: 'left'
					},
					{
						title: '性别',
						width: 100,
						dataIndex: 'patientGender',
						key: 'sex',
						fixed: 'left',
						scopedSlots: {
							customRender: 'sex'
						},
					},
					{
						title: '身份证号',
						dataIndex: 'patientIdCardNo',
						key: '1',
						width: 248
					},
					{
						title: '联系方式',
						dataIndex: 'patientPhone',
						key: '2',
						width: 150
					},
					{
						title: '负责医生',
						dataIndex: 'doctorName',
						key: '3',
						width: 150
					},
					{
						title: '绿色通道',
						dataIndex: 'address',
						key: '4',
						width: 150
					},
					{
						title: '发病时间',
						dataIndex: 'address',
						key: '5',
						width: 150
					},
					{
						title: '到院时间',
						dataIndex: 'address',
						key: '6',
						width: 150
					},
					{
						title: '开启绿道时间',
						dataIndex: 'address',
						key: '7',
						width: 180
					},
					{
						title: '卒中医生到场时间',
						dataIndex: 'address',
						key: '8',
						align: 'center',
						width: 180
					},
					{
						title: '采血时间',
						dataIndex: 'address',
						key: '9',
						align: 'center',
						width: 150
					},
					{
						title: '心电时间',
						dataIndex: 'address',
						key: '10',
						align: 'center',
						width: 150
					},
					{
						title: 'CT时间',
						dataIndex: 'address',
						key: '11',
						align: 'center',
						width: 150
					},
					{
						title: '团注时间',
						dataIndex: 'address',
						key: '12',
						align: 'center',
						width: 150
					},
					{
						title: '指标分析(单位/秒)',
						dataIndex: 'address',
						key: '13',
						align: 'center',
						width: 180
					},
					{
						title: '介入治疗记录',
						dataIndex: 'address',
						key: '14',
						align: 'center',
						width: 150
					},
					{
						title: '创建时间',
						dataIndex: 'address',
						key: '15',
						align: 'center',
						width: 150
					},
					{
						title: '状态',
						dataIndex: 'address',
						width: 100,
						align: 'center',
						key: '16'
					},
					{
						title: '备注',
						dataIndex: 'remark',
						width: 500,
						key: '17'
					},
					{
						title: '操作 (查看)',
						key: 'operation',
						fixed: 'right',
						align: 'center',
						width: 380,
						scopedSlots: {
							customRender: 'action'
						},
					},
				],
				firstAidData: {},
				carList: [], // 平车列表
				carNo: '', // 平车号
				patientId: '' //患者Id
			}
		},
		created() {
			this.getData()
			this.getSelectList();
		},
		methods: {
			...mapMutations('patient', ['setPatientData']),
			// 查询平车、平板设备列表
			async getSelectList() {
				let res = await selectList({
					param: {
						deviceType: 0,
					},
				});
				const {
					data,
					code,
					msg
				} = res;
				if (code === 200) {
					this.carList = data.list;
					// this.carNo = this.carList[0]?.deviceNo || ''; // 默认选中第一个平车
					// console.log('this.carNo ', this.carNo);
				}
				this.component = "patient-list"
			},
			//获取list数据
			async getData(pageNum) {
				if (pageNum) {
					this.pageNum = pageNum
				}
				if (pageNum == 1) {
					this.dataSource = []
				}
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					param: {
						keyWords: this.searchVal,
					},
				};
				const res = await getList(params);
				const {
					code,
					msg,
					data
				} = res;
				if (code === 200) {
					// this.isLoading = false;
					this.pagination.total = data.total;
					this.dataSource = data?.list || [];
				} else {
					this.$message.error(msg);
				}
			},
			//创建患者
			async goCreate() {
				this.$refs.patientCreate.open();
				await this.home.getRouter(-1);
			},
			// 查询平车、平板设备列表
			async getSelectList() {
				let res = await selectList({
					param: {
						deviceType: 0,
					},
				});
				const {
					data,
					code,
					msg
				} = res;
				if (code === 200) {
					this.carList = data.list;
					this.carNo = this.carList[0]?.deviceNo || ''; // 默认选中第一个平车
					console.log('this.carNo ', this.carNo);
				}
				this.component = "patient-list"
			},
			//搜索
			onSearch(data) {
				this.getData(data || 1)
			},
			editReport(item, modalRef) {
				// this.patientId=item.firstAidId
				this.$refs[modalRef].open(item)
			},
			checkReport(item, modalRef) {
				// const {
				// 	sourceId,
				// 	patientName,
				// 	patientAge,
				// 	patientGender,
				// 	firstAidId,
				// } = item;
				// this.setPatientData({
				// 	sourceId,
				// 	patientName,
				// 	patientAge,
				// 	patientGender,
				// 	firstAidId,
				// });
				this.$refs[modalRef].open(item)
			}
		}
	}
</script>

<style lang="less" scoped>
	.document {
		height: 100%;
		overflow-y: auto;

		.doc-search {}

		.doc-list {
			height: 100%;
			display: flex;
			flex-direction: column;

			.doc-list-action {
				display: flex;
				justify-content: space-between;
				margin-bottom: .2rem;
				padding: 10px;
				background-color: #fff;

				.doc-list-title {
					font-size: 1.2rem;
					font-weight: bold;
					line-height: 35px;
				}

				.doc-list-btns {}
			}

			.doc-list-table {
				flex: 1;
				overflow-y: auto;
				background-color: #fff;
				padding: 10px;

			}

		}
	}
</style>

<style lang="less">
	.document {
		.doc-list {
			.ant-btn-link {
				padding: 0 4px;
			}
		}
	}
</style>